IFD:PhysicalComp2011: Difference between revisions

From Medien Wiki
No edit summary
 
(42 intermediate revisions by 11 users not shown)
Line 3: Line 3:
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Termin:'' Montag, 15:15 bis 18:30 Uhr<br/>
''Termin:'' Montag, 15:15 bis 18:30 Uhr<br/>
''Ort:'' [[Marienstraße 7b]], Raum 104 (wird voraussichtlich noch geändert!)<br/>
''Ort:'' [[Marienstraße 7b]], Raum 104<br/>
''Erster Termin:'' 17.10.2011
''Erster Termin:'' 17.10.2011


Line 28: Line 28:


==Themen==
==Themen==
* Processing  
* [[Processing]]
* OpenFrameworks
* OpenFrameworks
* Object-oriented programming
* Object-oriented programming
Line 54: Line 54:
==Zielgruppe==
==Zielgruppe==
Master-Studenten der Fakultäten Medien, Gestaltung und der Medienarchitektur
Master-Studenten der Fakultäten Medien, Gestaltung und der Medienarchitektur
==Syllabus==
Termine des Semesters
# tba


==Literatur==
==Literatur==
Line 79: Line 75:
===Data visualisation===
===Data visualisation===
* [[Visualisierung]]
* [[Visualisierung]]
*[http://feltron.com/ Nicholas Feton] // [http://rhizome.org/editorial/2011/jun/1/storytelling-interview-nicholas-felton/ Interview w. Nicholas Felton] // [http://daytum.com/ DAYTUM]
*[http://feltron.com/ Nicholas Felton] // [http://rhizome.org/editorial/2011/jun/1/storytelling-interview-nicholas-felton/ Interview w. Nicholas Felton] // [http://daytum.com/ DAYTUM]
*[http://www.number27.org/wefeelfine.html We Feel Fine] // [http://www.adobe.com/designcenter/thinktank/danzico2.html Telling stories using data: An interview with Jonathan Harris]
*[http://www.number27.org/wefeelfine.html We Feel Fine] // [http://www.adobe.com/designcenter/thinktank/danzico2.html Telling stories using data: An interview with Jonathan Harris]


Line 90: Line 86:
===Student Links===
===Student Links===
====Dianna Mertz====
====Dianna Mertz====
Interesting projects that utilize data:
Projects utilizing data:
*[http://vimeo.com/25781176/ Telepresent Water] // [http://www.dwbowen.com/ David Bown]
*[http://vimeo.com/25781176/ Telepresent Water] // [http://www.dwbowen.com/ David Bown]
*[http://www.stephencartwright.com/ Stephen Cartwright]
*[http://www.stephencartwright.com/ Stephen Cartwright]
Line 105: Line 101:


====Julia Putscher====
====Julia Putscher====
*[http://timescapers.com/blog/ Timescapers]
*[http://timescapers.com/blog Timescapers]
*[http://harddisko.ch/dok.htm/ Harddisko] // [http://www.youtube.com/watch?v=apOaClsKQS8/ Harddisko Video]
*[http://harddisko.ch/dok.htm Harddisko] // [http://www.youtube.com/watch?v=apOaClsKQS8/ Harddisko Video]
*[http://www.we-make-money-not-art.com/archives/2011/10/the-noisolation-headphones.php/ Noisolation Headphones]
*[http://www.we-make-money-not-art.com/archives/2011/10/the-noisolation-headphones.php/ Noisolation Headphones]
*[http://vimeo.com/17997743/ Elektronic Dreaming]
*[http://vimeo.com/17997743 Elektronic Dreaming]
 
====Patawat Phamuad====
'''Project Synopsis'''
* [[/Projects/Patawat_Phamuad|Winme Ticket - funnier public transportation method]]


====Caren-Maria Jörß====
====Caren-Maria Jörß====
Line 123: Line 115:


==== [[Sebastian Wolf|Sebastian]] ====
==== [[Sebastian Wolf|Sebastian]] ====
* [[IFD:Zeitmaschinen|Zeitmaschinen/Time Machines]] ([http://infosthetics.com/archives/2011/07/mapnificent_how_far_can_you_travel_via_public_transport_in_a_given_time.html])
* [http://vimeo.com/17260051 White Glove Tracking]
* [http://vimeo.com/17260051 White Glove Tracking]
* [http://vimeo.com/13007530 The Sporenspiel]
* [http://vimeo.com/13007530 The Sporenspiel]
Line 132: Line 121:


====Augusto Gandia====
====Augusto Gandia====
http://keiichimatsuda.com/augmentedcity.php
*http://keiichimatsuda.com/augmentedcity.php
http://keiichimatsuda.com/augmented.php
*http://keiichimatsuda.com/augmented.php


== Processing sketches ==


== 24.10.2011 Processing sketches ==
[[/code|Here you find the code examples]]


=== I Simple shapes ===
== Student projects ==


<source lang="java">
On these pages you can post everything related to your project (e.g. links, inspirations, thoughts, sketches, spreadsheets, photos). <br />Please fill it with content on a regular basis. This is also important for your evaluation at the end of the semester, since documenting your project is part of this class.
/* SIMPLE SHAPES
*
* Get familiar with the coordinate system and the way
* shapes are beeing drawn onto the screen.
*
* Frederic Gmeiner 2011
*/


// define the width and height of the display window:
*[[/Augusto Gandia|Augusto Gandia]]
// 400 x 400 px
*[[/Caren Maria joerss|Caren-Maria Jörß]]
size(400,400);
*[http://doubledi.com/indepth.html Dianna Mertz - In-Depth: Smart Containers]
 
*[[/Hui Yuan|Hui Yuan]]
// draw the following shapes without outlines:
*[[/Jenena Dokic|Jenena Đokić]]
noStroke();
*[[/Jie Wang|Jie Wang ]]
//set the fill color of the following shapes to pure red:
*[[/Julia Putscher|Julia ]]
fill(255,0,0);
*[[/Patawat Phamuad|Patawat Phamuad]]
// draw a rectangle:
*[[IFD:Zeitmaschinen/geochrono|Sebastian Wolf]]
rect(230,230,50,100);
*[[/Xin Wang|Xin Wang]]
// set the fill color to pure green and draw a rectangle:
*[[/Yuan Yuan Liu|Yuan Yuan Liu]]
fill(0,255,0);
*[[/Yue Mao|Yue Mao]]
rect(200,200,50,100);
*[[/Yunshui Jin|Yunshui Jin]]
// set the outline color to pure blue:
*[[/Chaoying Wang|Chaoying Wang]]
stroke(0,0,255);
*[[/Adriana Cabrera|Adriana Cabrera]]
// draw the following shapes without any fill color:
*[[/Lu Jin| Lu Jin]]
noFill();
*[[/Liana Chandra|Liana Chandra]]
// draw a ellipse:
ellipse(100,100,20,20);
</source>
<br /><br />
 
=== II Relations ===
 
<source lang="java">
/* RELATIONS
*
* Instead of using fixed values, we use variables
* to formulate relations. In this example a structure
* based on two vertical parallel lines with a circle
* in between is formulated.
*
* Frederic Gmeiner 2011
*/
// variable to store the radius of the circle:
int rad = 40;
// variables to store the x and y position of the structure:
int startPointX = 100;
int startPointY =100;
 
size(400,400);
 
// left line starts at the defined values and has a length of 80px:
line(startPointX, startPointY, startPointX, startPointY+80);
 
// the ellipse in between the two lines has a radius of "rad",
// so the width and hight is "2*rad". Since ellipses have their
// origin in the middle in processing, we need to add the radius
// to our "startPointX" value to have it centered in between the lines:
ellipse(startPointX+rad, startPointY+40, 2*rad, 2*rad);
 
// the right line is set in relation to the width of the circle:
line(startPointX+(2*rad), startPointY, startPointX+(2*rad), startPointY+80);
 
</source>
<br /><br />
 
=== III Functions ===
 
<source lang="java">
/* FUNCTIONS
*
* Here we define a custom function ("crossFunction()") which draws a
* cross onto the screen.
* It takes the parameters: X value, Y value and the size.
* Also the continuous mode is introduced, which
* uses the processing functions setup() and draw().
* Via the pre-defined variables "mouseX" and "mouseY" we
* can access the current mouse position.
*
* Frederic Gmeiner 2011
*/
 
// the setup() function is called everytime the program
// starts once.
void setup(){
  size(400,400);
}
 
// the draw() function is the main loop function of your program:
// after every operation in the draw function has been
// called, the draw function is called again. this
// goes on until the program quits.
void draw(){
  background(255);
  crossFunction(mouseX,mouseY,10);
}
 
// this is the definition of the custom function "crossFunction()":
void crossFunction(int crossX, int crossY, int crossSize){
  line(crossX-crossSize/2, crossY-crossSize/2, crossX+crossSize/2, crossY+crossSize/2);
  line(crossX+crossSize/2, crossY-crossSize/2, crossX-crossSize/2, crossY+crossSize/2);
}
 
</source>
<br /><br />
 
=== IV Movement & conditions ===
 
<source lang="java">
/* MOVEMENT & CONDITIONS
*  
* By changing a variable during the runtime,
* we can alter the condition of the program.
* Here we increment an integer variable
* each time draw() is called. This variable is
* used for the x-position of a line, thus
* creating the illusion of a continuous movement
* from left to right.
* Via the "if" and "else" branches we can react
* to different states of the program and alter it
* accordingly.
*
* Frederic Gmeiner 2011
*/
 
// variable to store the x-position of the line:
int lineX = 0;
 
void setup(){
  size(500,300);
}
 
void draw(){
  // clear the background
  background(255);
 
  // if the x position of the line is larger than the middle of the screen:
  if(lineX > width/2){
    // change the stroke colour to pure red:
    stroke(255,0,0);
  // if the x position of the line is smaller than the middle of the screen:
  }else{
    // set the stroke coulour to black:
    stroke(0,0,0);
  }
 
  // draw a vertical line from the top (0) to the bottom ("height") at
  // the current x-position:
  line(lineX,0,lineX,height);
 
  // increment the lineX variable by 1
  // (you could also simply write "lineX++")
  lineX = lineX+1;
 
  // use the "println()" function to show the value of variables
  // in the console. this is helpful for debugging.
  println(lineX);
}
 
</source>
<br /><br />
=== Exercise I: Bouncing Line ===
This is one possible solution to achieve that the
line from the example above changes it direction
when it reaches the left and right boundaries of
the sketch window.
<source lang="java">
/* BOUNCING LINE
*
* This is a modification of the previous sketch
* so that the line will bounce off the left and
* right borders of the window. Notice the introduction
* of the variable "speed" to control the speed and
* direction of the moving line.
*
* Frederic Gmeiner 2011
*/
// variable to hold the currect x position of the line
int lineX = 0;
// variable that controls the speed and direction
int speed =1;
 
void setup(){
  size(500,300);
}
 
void draw(){
  background(204);
 
  // if the x position of the line exceeds the right border of the window:
  // change the direction by setting the speed to a negative value
  if(lineX > width){
    speed = -1;
  }
  // accordingly set the speed to a positive value as soon as the line touches
  // the left border.
  if(lineX < 0 ){
    speed = 1;
  }
 
  // here the new x position is calculated by adding the speed onto the
  // current x position. if speed is -1, lineX decreases. if speed is 1, lineX
  // increases.
  lineX = lineX + speed;
 
  // draw the line based on the calculated x position:
  line(lineX,0,lineX,height);
}
</source>
<br /><br />
 
=== Exercise II: A frightened rectangle  ===
Write a sketch that contains one rectangle with a size of 20x20px.<br />
As soon as the mouse pointer is over the rectangle, the rectangle
starts to shiver.
 
Some useful hints:
* [http://processing.org/reference/mouseX.html mouseX]
* [http://processing.org/reference/mouseY.html mouseY]
* [http://processing.org/reference/random_.html random()]


[[Category:WS11]]
[[Category:WS11]]
[[Category:Physical computing]]
[[Category:Physical Computing]]
[[Category:Frederic Gmeiner]]
[[Category:Interface-Design]]
[[Category:Fachmodul]]
[[Category:WS11]]
[[Category:Physical Computing]]
[[Category:Frederic Gmeiner]]
[[Category:Frederic Gmeiner]]
[[Category:Interface Design]]
[[Category:Interface-Design]]
[[Category:Fachmodul]]
[[Category:Fachmodul]]

Latest revision as of 14:54, 21 February 2013

Fachmodul
Lehrperson: Frederic Gmeiner
Bewertung: 6 ECTS, 4 SWS
Termin: Montag, 15:15 bis 18:30 Uhr
Ort: Marienstraße 7b, Raum 104
Erster Termin: 17.10.2011

Beschreibung

Data Stories: Tools for self-reflection

Datenjounalismus bezeichnet allgemein die Verwendung von öffentlich zugänglichen Daten zur Generierung von (interaktiven) Informationsgrafiken zur Erweiterung klassischer journalistischer Reportagen. Die Form der »Datengeschichte« können jedoch auch für den persönlichen Gebrauch interessant sein, denn durch die stetig wachsende Präsenz von Sensoren in Consumer Geräten ist es heute sowohl für den privaten und individuellen Zweck ohne große Mühe machbar eigene Daten über sich selbst und seine Umwelt zu sammeln.

Wie lassen sich diese Daten, die bei der Benutzung von (digitalen) Geräten im Alltag entstehen, nutzen? Welchen Mehrwert können diese Archive für uns selbst oder für eine Gemeinschaft haben? Wie lassen sich gesammelte Informationen inszenieren, sodass diese einen persönlichen Wert erhalten?

Im Mittelpunkt des Kurses steht ein Selbstexperiment bei dem selbst gewählte Daten über einen Zeitraum gesammelt und anschließend inszeniert werden sollen. Hierbei soll eine Übersetzung eines analogen Datensatzes in einen digitalen (oder umgekehrt) stattfinden wobei die dafür verwendeten Geräte und Programme gemeinsam im Rahmen des Kurses entwickelt werden.

Auf der einen Seite werden technische Aspekte und Grundlagen des physical computings behandelt. Ausgangspunkt hierfür ist die Arduino Microcontroller-Plattform sowie die Programmierumgebungen Processing und OpenFrameworks. Je nach vorhandenem Kenntnisstand der Teilnehmer und Anforderungen des jeweiligen Projektes werden weitere Themen angeschlossen, wobei dieses auch in Form von Referaten geschehen kann.

Gleichzeitig sollen alle Teilnehmer im Kurs ein eigenes Projekt entwickeln bei dem das Entwerfen individueller Werkzeuge und Strategien zur Sammlung und Inszenierung (persönlicher) Daten im Vordergrund steht. Dieses kann sowohl anwendungsorientiert wie frei künstlerisch sein.

English description

How can we utilise all the meta-data that is being created by the usage of our everyday (digital) devices for an individual purpose? What is the benefit of these archives for ourself or a community? In what way can we stage information, so that it becomes more personal and emotional?

Together we will develop individual tools and strategies to collect and expose (personal) data, either with an application-oriented or an artistic approach.

In order to realise these projects, students will learn about the technical aspects and basics of physical computing with a focus on the Arduino micro-controller as well as the Processing and OpenFramework environments.

Themen

  • Processing
  • OpenFrameworks
  • Object-oriented programming
  • Arduino
  • Overview and usage of libraries
  • Reading and controlling of common sensors and actuators
  • APIs and protocols like JSON / XML / OSC

Voraussetzungen

  • Programmier- und Elektronikkenntnisse sind wünschenswert, jedoch nicht zwingend notwendig.
  • Bitte wenn möglich einen eigenen Computer mitbringen.

Anmeldung

Die Bewerbung für eine Teilnahme am Kurs muss bis zum 10.10.2011 per E-Mail mit dem Betreff: Bewerbung PhysicalComp2011 und folgenden Angaben an: hello (at) fregment.com gesendet werden.

  • Name
  • Fachrichtung und Fachsemester
  • Matrikelnummer
  • Angabe der geltenden Prüfungsordnung
  • Gültige E-Mail-Adresse @uni-weimar.de (zur Bestätigung der Anmeldung) Warum?

Sollte es mehr als 15 Bewerber geben, entscheidet das Motivationsschreiben, die Zugehörigkeit zur Fakultät/des Studiengangs und ggf. die Reihenfolge der Anmeldungen über die Aufnahme in den Kurs.

Leistungsnachweis

Aktive Teilnahme, Dokumentation einer teilweise oder ganz umgesetzen Projektidee im Wiki

Zielgruppe

Master-Studenten der Fakultäten Medien, Gestaltung und der Medienarchitektur

Literatur

Hinweis: Die hier aufgeführte Literatur ist optional und nicht verbindlich!

Mailinglist

Please subscribe to the list "Datastories" here: https://mg.medien.uni-weimar.de/mailman/listinfo/datastories


Links

Data visualisation

Technology

Student Links

Dianna Mertz

Projects utilizing data:

Thematic interests:

Jelena Djokic

Julia Putscher

Caren-Maria Jörß

Stephan Thiel - interaction and information designer:

Sebastian

Augusto Gandia

Processing sketches

Here you find the code examples

Student projects

On these pages you can post everything related to your project (e.g. links, inspirations, thoughts, sketches, spreadsheets, photos).
Please fill it with content on a regular basis. This is also important for your evaluation at the end of the semester, since documenting your project is part of this class.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:PhysicalComp2011&oldid=53999"