# Interaction Umeå Wiki

### Site Tools

courses:intro.prototyping.fall.2012.oct18

# Differences

This shows you the differences between two versions of the page.

 courses:intro.prototyping.fall.2012.oct18 [2012/09/18 04:24]130.239.234.16 courses:intro.prototyping.fall.2012.oct18 [2012/09/24 04:09] (current)130.239.235.66 Both sides previous revision Previous revision 2012/09/24 04:09 2012/09/18 04:24 2012/09/18 04:23 2012/09/18 03:33 2012/09/18 03:27 created 2012/09/24 04:09 2012/09/18 04:24 2012/09/18 04:23 2012/09/18 03:33 2012/09/18 03:27 created Line 1: Line 1: + === Intro to processing === + + Processing is an open source programming environment and community that can be found at[[http://​www.processing.org/​|processing.org]] ​ + + We learned to draw 2D stuff with code like this: + + + void setup()// This is where we prepare stuff + { + size(640, 480);//size of canvas + background(0);//​color of background + fill(200);//​color filled areas + stroke(255, 0, 0);//color of lines + strokeWeight(5);//​width of lines + } + + void draw()//​This is where the magic happens + { + rect(70, 70, 100, 100);//draw a rectangle + } + + ​ + + To keep track of the X-coordinate while moving a rectangle we used a variable: + + int myVeryOwnX; //Naming the variable, and stating it's a number + + void setup()// This is where we prepare stuff + { + size(320, 240); + myVeryOwnX = 10;//​setting inital value + } + + void draw()//​This is where the magic happens + { + background(0);//​redraw background + myVeryOwnX=myVeryOwnX+1;​ //​increasing the variable by one + rect(myVeryOwnX,​ 70, 100, 100);//​drawing the rectangle using the variable as x-coordinate + } + ​ + + We got introduced to IF-statements to make changes when circumstances are met: + + + if(myVeryOwnX > 320) //If variable is more than 320 + { + myVeryOwnX = 0;  //we set variable back to 0 + } + ​ + + We got introduced to FOR-loops for repeating actions a number of times: + + for (int i=0 ; i<6 ; i++)//​variable i starts with 0 and increases by 1 until it hits 6 + { + rect(70, 70+i*50, 100, 100);//this is done, in this case using the i-number in Y-coordinate. + } + ​ + ​ + + System variables we talked about: + width: contains the width of your sketch as a number + height: contains the height of your sketch as a number + mouseX: contains the X-coordinate of the pointer as a number + mouseY: contains the Y-coordinate of the pointer as a number + ​ + Commands we used: + point();//​draw point + line();//​draw line + rect(); //draw rectangle + ellipse();//​draw ellipse or circle + triangle();//​draw triangle + noCursor();//​hides the mousepointer + background();//​draws background with specified color + fill();//​sets color for shape areas + stroke();//​sets color of lines and frames + ​ + ​ + For the full info of the use of these commands I encourage you to look up the commands in the[[http://​www.processing.org/​reference|reference]] part of the processing site. + + Homework until next tuesday: Using the 2D-shapes, draw something that looks like something, and have it change over time, or using values from the mouse. Color, size, position, movement, anything. + ​