IFD:All Hail The Pixels/ProcessingSketches

17.10.2011 Processing sketches

P01 Shapes and Relations

/*
 P01 Shapes and Relations
 
 This example illustrates how to formulate properties in relation to each other.
 Also the following principles are introduced:   
 - Usage of the setup() and draw() functions
 - Drawing of basic shapes and colors
 - Definition and usage of variables > dimension, halfDimension and border
 - Dynamic mouse input to influence the state of the programm during runtime
 - Output values to the console with print() and println()
*/

void setup() {  
  // set the canvas size
  size(1000, 600);   
}


void draw() {
  
  // set background color to white
  background(255);    
  // no fill color
  noFill();          
  
  // variable for the size of the rectangle and the ellipse
  float dimension = mouseX;     
  // variable for the distance between the red lines and the center shapes
  float border = mouseY * 0.2;  
  
  // set the stroke color to black
  stroke(0); 
  
  // use the center as origin when drawing rectangles
  rectMode(CENTER);  
  
  // draw a rectangle on the left side of the canvas with varaible dimensions
  rect(250, 300, dimension, dimension); 
  // draw a circle on the right side of the canvas with varaible dimensions
  ellipse(750, 300, dimension, dimension);
  
  // calculate and store half of the current dimension (for better readability)
  float halfDimension = dimension * 0.5;
  stroke(255, 0, 0);
  // draw the two lines according to the dimension of the shapes and the vertical border
  line(250 - halfDimension, 300 - halfDimension - border, 750 + halfDimension, 300 - halfDimension - border);
  line(250 - halfDimension, 300 + halfDimension + border, 750 + halfDimension, 300 + halfDimension + border);
  
  // output the actual dimension and border values to the console
  print("dimension:");
  println(dimension);
  
  print("border:");
  println(border);
}

P02 Custom Functions

/*
 P02 Custom functions and transformations
 
 This example shows how to write custom functions and how to use the
 transform() and the rotate() statements to move and rotate the canvas.
 It also illustrates the possibility to store and restore a certain 
 transformation state with pushMatrix() and popMatrix().
*/

void setup(){
  
  size(1000,600);
  background(0);
  
  // move to the center of the canvas
  translate(width * 0.5, height * 0.5); 
  // draw an arrow and a cross with the size of 10 pixels
  arrow();
  crossShape(10);
  
  // store the actual position (in this case the center of the stage) 
  pushMatrix(); 
    
    // move 200 pixels to the right from the canvas center
    translate(200, 0);
    // rotate the canvas by 60 degrees
    rotate( radians(60) ); 
    // draw an arrow and a cross to this new rotated location
    arrow();
    crossShape(10);
  
  // recall the previously stored position (the center of the 
  // canvas which was done using the pushMatrix() statement) 
  popMatrix(); 
  
  
  // move 100 pixels down from the center of the canvas
  translate(0,100);
  arrow();
  crossShape(10);
    
}

// Define a new function which draws a red arrow to the actual origin of the canvas 
void arrow(){
  stroke(255,0,0);
  line(0,0,50,0);
  line(45,-5,50,0);  
  line(45,5,50,0);
}

// Define a new function which draws a black cross depending on the passed parameter "dimension"
void crossShape(float dimension){
  float halfDimension = dimension * 0.5;
  stroke(255);
  line(-halfDimension, -halfDimension, halfDimension, halfDimension );
  line( halfDimension, -halfDimension, -halfDimension, halfDimension);
}