|
|
| (48 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====
| |
| * [[/Projects/Patawat_Phamuad|Winme Ticket - funnier public transportation method]]
| |
|
| |
|
| ====Caren-Maria Jörß==== | | ====Caren-Maria Jörß==== |
| Line 122: |
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 131: |
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: 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 />
| |
|
| |
|
| [[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]] |
