# Interaction Umeå Wiki

### Site Tools

courses:intro.prototyping.fall.2016.sep09

# Differences

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

 — courses:intro.prototyping.fall.2016.sep09 [2016/09/06 03:55] (current)rickard created 2016/09/06 03:55 rickard created 2016/09/06 03:55 rickard 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]] + + Homework until next time: Using 2D-shapes, draw some graphics, and have hem change somehow. For example, use a variable to change the value of color, size, position, movement. + + 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 + } + + 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 Joe; //Naming the variable, and stating it's a number + + void setup()// This is where we prepare stuff + { + size(320, 240); + Joe = 10;//setting inital value + } + + void draw()//This is where the magic happens + { + background(0);//redraw background + Joe=Joe+1; //increasing the variable by one + rect(Joe, 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(Joe > 320) //If variable is more than 320 + { + Joe = 0;  //we set variable back to 0 + } + + + + We also tried out the for-loop for stuff that gets repeated a number of times: + + for (int i=0; i<5; i++) //the following will happen 5 times + { + rect(55*i, 55, 50, 50); //you can use the counter variable i, if you want to + } + + + + System variables we talked about: + mouseX: contains the X-coordinate of the pointer as a number + mouseY: contains the Y-coordinate of the pointer as a number + + Other useful system variables: + width: contains the width of your sketch as a number + height: contains the height of your sketch as a number + displayWidth: contains the width of your whole screen + displayHeight: contains the height of your whole screen + + + + Commands we used: + point();//draw point + line();//draw line + rect(); //draw rectangle + + + noCursor();//hides the mousepointer + background();//draws background with specified color + fill();//sets color for shape areas + stroke();//sets color of lines and frames + noFill(); noStroke(); //stops using fill and stroke + + + 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. + 