|
|
| (36 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()] | |
| | |
| | |
| == 07.11.2011 Processing sketches ==
| |
| | |
| === Exercise I: Bouncing Line (Advanced)===
| |
| | |
| <source lang="java">
| |
| /* BOUNCING LINE ADVANCED
| |
| *
| |
| * Notice the introduction of the variables
| |
| * "speed" and "direction to control the speed
| |
| * and direction of the moving line inependently.
| |
| *
| |
| * Frederic Gmeiner 2011
| |
| */
| |
| | |
| // variable to hold the currect x position of the line
| |
| float lineX = 0;
| |
| // variable that controls the speed
| |
| float speed = 2.3f;
| |
| // variable that controls the direction
| |
| // (either 1 or -1)
| |
| int direction = 1;
| |
| | |
| | |
| void setup(){
| |
| size(300,300);
| |
| }
| |
| | |
| void draw(){
| |
|
| |
| background(204);
| |
|
| |
| // if the x position of the line exceeds the right border of the window
| |
| // OR (||) the x position of the line exceeds the left border
| |
| // of the window:
| |
| if(lineX > width || lineX < 0){
| |
| direction = direction * -1; // change the direction
| |
| }
| |
|
| |
| // here the new x-position is calculated by adding the speed and direction onto the
| |
| // current x-position. if direction is -1, lineX decreases. if direction is 1, lineX
| |
| // increases:
| |
| lineX = lineX + (speed * direction);
| |
|
| |
| // draw the line based on the calculated x-position:
| |
| line(lineX,0,lineX,height);
| |
| }
| |
| </source>
| |
| <br /><br />
| |
| | |
| === Exercise II: Solution===
| |
| | |
| <source lang="java">
| |
| /* A FRIGHTENED SQUARE
| |
| *
| |
| * A little sketch to illustrate the random() function
| |
| * and a more complex boolean equation to check whether
| |
| * the mouse pointer is inside a rectangular shape.
| |
| *
| |
| * Frederic Gmeiner 2011
| |
| */
| |
| | |
| // the x an y positions of the square:
| |
| float xPos = 200f;
| |
| float yPos = 200f;
| |
| // the width and height of the square:
| |
| int s = 20;
| |
| | |
| void setup(){
| |
| size(400,400);
| |
| }
| |
| | |
| void draw(){
| |
| background(204);
| |
|
| |
| // Here we check if the position of the mouse is somewhere inside of the
| |
| // square. To know this, all these four contitions must be true ( && ):
| |
| if( mouseX > xPos && mouseX < xPos + s && mouseY > yPos && mouseY < yPos + s){
| |
| xPos += random(-2,3); // add a random value between -2 and 3 to the xPos
| |
| yPos += random(-2,3);
| |
| fill(40);
| |
| }else{
| |
| fill(255);
| |
| }
| |
|
| |
| // finally draw the square:
| |
| rect(xPos, yPos, s, s);
| |
| | |
| }
| |
| </source>
| |
| <br /><br />
| |
| | |
| | |
| | |
| === V for() loops===
| |
| | |
| <source lang="java">
| |
| /* DYNAMIC DISTRIBUTION
| |
| *
| |
| * This sketch demonstrates the usage of
| |
| * a for-loop for calculating and drawing
| |
| * a certain number of ellipses according
| |
| * to the changing mouseX position.
| |
| *
| |
| * Frederic Gmeiner 2011
| |
| */
| |
| | |
| | |
| // the number of circles:
| |
| int numCircles = 15;
| |
| | |
| void setup(){
| |
| size(500,200);
| |
| stroke(255);
| |
| fill(150);
| |
| smooth();
| |
| }
| |
| | |
| void draw(){
| |
| background(255);
| |
|
| |
| // calculate the distance between the circles
| |
| // so that in total it results in the mouseX position:
| |
| float distance = mouseX / (numCircles-1);
| |
|
| |
| // for every circle (numCircles) calculate the xPos
| |
| // and draw it onto the screen:
| |
| for(int i=0; i < numCircles; i++){
| |
| float xPos = i*distance;
| |
| ellipse(xPos,100,10,10);
| |
| }
| |
| }
| |
| </source>
| |
| <br /><br />
| |
| | |
| | |
| === VI The array: a collection of variables===
| |
| | |
| <source lang="java">
| |
| /* Random points in an array
| |
| *
| |
| * This demonstrates how to store values in
| |
| * an array. This is useful when working with
| |
| * many things which share the same parameters.
| |
| * Here we use two arrays to store the coordinates
| |
| * of circles.
| |
| *
| |
| * Frederic Gmeiner 2011
| |
| */
| |
| | |
| // total number of circles:
| |
| int numCircles = 40;
| |
| | |
| // the radius of the circles
| |
| float rad = 20f;
| |
| | |
| // initializing two arrays for storing the x and y positions
| |
| // of the circles:
| |
| float[] xPositions = new float[numCircles];
| |
| float[] yPositions = new float[numCircles];
| |
| | |
| | |
| void setup(){
| |
|
| |
| size(500,500);
| |
| smooth();
| |
| noStroke();
| |
| fill(150);
| |
|
| |
| // iterating over the arrays to set each position with
| |
| // a random value based on the window size:
| |
| for(int i=0; i< numCircles; i++){
| |
| xPositions[i] = random(0,width);
| |
| yPositions[i] = random(0,height);
| |
| }
| |
| }
| |
| | |
| | |
| void draw(){
| |
| | |
| background(204);
| |
|
| |
| // again iterating over the arrays. but this time we only
| |
| // get the x and y coordinates to draw the circles:
| |
| for(int i=0; i< numCircles; i++){
| |
| ellipse(xPositions[i], yPositions[i], rad, rad);
| |
| }
| |
| | |
| }
| |
| </source>
| |
| <br /><br />
| |
| | |
| === Exercise III ===
| |
| Modify the example VI so that the size of the circles changes over time
| |
| using the sine function sin().
| |
| | |
| Helpful links: <br />
| |
| [http://processing.org/learning/basics/sine.html sin() Example] <br /> | |
| [http://processing.org/learning/trig/ General introduction] (Try out the sketch by copy-pasting it into your processing editor)
| |
| <br /><br />
| |
| | |
| | |
| == 14.11.2011 Processing sketches ==
| |
| | |
| === READING DATA FROM A TEXTFILE ===
| |
| | |
| Imports a data table from a textfile
| |
| with tab seperated values (tsv). <br /> These
| |
| formats are very common when exporting
| |
| spreadsheets from Excel or similar software.<br />
| |
| Make sure that the file "measurements.tsv"
| |
| exists in the data folder of this sketch.
| |
| | |
| The Table class is written by Ben Fry:
| |
| http://benfry.com/writing/archives/3<br />
| |
| It handles the import and access to the data.
| |
|
| |
| Download:
| |
| [[Media:PhysicalComp11_reading_tsv.zip]] | |
| | |
| | |
| <br /><br />
| |
|
| |
|
| [[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]] |
