User Tools

Site Tools


courses:intro.prototyping.fall.2012.oct18

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
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
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:
 +
 +<code java>
 +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
 +}
 +
 +</​code>​
 +
 +To keep track of the X-coordinate while moving a rectangle we used a variable:
 +<code java>
 +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
 +}
 +</​code>​
 +
 +We got introduced to IF-statements to make changes when circumstances are met:
 +<code java>
 +
 +  if(myVeryOwnX > 320) //If variable is more than 320
 +  {
 +    myVeryOwnX = 0;  //we set variable back to 0
 +  }
 +</​code>​
 +
 +We got introduced to FOR-loops for repeating actions a number of times:
 +<code java>
 +  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.
 +  }
 +</​code>​
 +  ​
 +<code java>
 +  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
 +</​code>​
 +  ​
 +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.
 +  ​
  
courses/intro.prototyping.fall.2012.oct18.txt · Last modified: 2012/09/24 04:09 by 130.239.235.66