Interaction Umeå Wiki

Site Tools

courses:intro.prototyping.fall.2011.oct20

Differences

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

 — courses:intro.prototyping.fall.2011.oct20 [2011/10/21 02:43] (current)130.239.149.203 created 2011/10/21 02:43 created 2011/10/21 02:43 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 and make it move with code like this: + + + int X = 100; + + void setup() + { + size(320, 240); + background(100);​ + } + + void draw() + { + background(100);​ + X=X+5; + rect(X,​50,​100,​100); ​ + delay(250); + } + ​ + + An extension of that was to keep track of both the movement of a cube and the direction it was moving using an if-statement checking several variables. + + + int X = 100; + int direction = 0; //0 = going right, 1 = going left; + + + void setup() + { + size(400, 300); + background(100);​ + } + + void draw() + { + background(100);​ + //Move forward until right edge + if((X < 300) && (direction == 0)){ + X=X+5; + rect(X,​100,​100,​100); ​ + delay(150); + } + else + { + direction = 1; + } + ​ + //If right edge, move left + if((X > 1) && (direction == 1)){ + X = X-5; + rect(X,​100,​100,​100); ​ + delay(150); + } + else + { + direction = 0; + } + + + } + ​ + + We also learned how to put an image in the sketch and have it move around to the movement of a mouse making use of the system variables mouseX and mouseY which always contains the X and Y coordinates of your mousepointer. + + + ​PImage myImage; + + + void setup() + { + size(640, 480); + noCursor(); + } + + void draw() + { + background(0); ​ + myImage = loadImage("​RicPic.jpg"​);​ + image(myImage,​mouseX,​ mouseY); + } + + ​ + + The picture makes use of the object type PImage and some of you made use of the function ​ + resize(width,​ height) to have the image change size according to mouseX and mouseY. 