User Tools

Site Tools


courses:intro.prototyping.fall.2011.oct20

Differences

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

Link to this comparison view

courses:intro.prototyping.fall.2011.oct20 [2011/10/21 02:43] (current)
130.239.149.203 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:
 +
 +<code java>
 +int X = 100;
 +
 +void setup()
 +{
 +  size(320, 240);
 +  background(100);​
 +}
 +
 +void draw()
 +{
 +  background(100);​
 +  X=X+5;
 +  rect(X,​50,​100,​100); ​
 +  delay(250);
 +}
 +</​code>​
 +
 +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.
 +
 +<code java>
 +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;
 +  }
 +
 +
 +}
 +</​code>​
 +
 +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.
 +
 +<code java>
 + ​PImage myImage;
 +
 +
 +void setup()
 +{
 +  size(640, 480);
 +  noCursor();
 +}
 +
 +void draw()
 +{
 +  background(0); ​
 +  myImage = loadImage("​RicPic.jpg"​);​
 +  image(myImage,​mouseX,​ mouseY);
 +}
 +
 +</​code>​
 +
 +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.
courses/intro.prototyping.fall.2011.oct20.txt · Last modified: 2011/10/21 02:43 by 130.239.149.203