User Tools

Site Tools


courses:intro.prototyping.fall.2012.oct18

Intro to processing

Processing is an open source programming environment and community that can be found atprocessing.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 thereference 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