Lecture 04: Processing (II)

Agenda:

  • Review of assignment-04 projects
  • More on generativity
  • Review of last week’s material
  • New material

Review of Last Week’s Material:

Variables, Iteration, Blocks
A reminder of the basics.

  • Recap of variables (The multiple-lines example)
  • for loops (The multiple-lines example, generalized)
  • Side note: Variables are scoped with respect to { } blocks.

Diagnosing your code
How can you inspect the value which some variable holds?

  • Printing the values of variables to the console
  • Constructing simple strings through concatenation.
  • Displaying strings by drawing text() to the canvas

New Material

  • Motion:
    • Linking position to a changing variable
    • Looping around the screen
    • Circular Motion
    • Lissajous Figures
    • Interpolated Motion
    • Drunk Walk

And…..

  • Mouse Interaction: Interactions based on continuous cursor data.
    • Printing out the mouse values
    • A ball linked to the mouse directly
    • A ball mathematically related to the mouse value
    • A ball linked to the mouse by inverse relationships
    • A ball linked to the mouse by an intermediate variable
  • Keyboard Interaction
  • State Machines
    • booleans that govern display conditions
  • Functional Abstraction, if we’re lucky

Readings:

  • Getting Started with Processing: Chapter 4 (pp. 37-50)
  • Processing: A Handbook, the following sections:
    • Data 1: Variables;
    • Math 1: Arithmetic;
    • Control 2: Repetition;
    • Data 2: Text;
    • Math 4: Random;
    • Transform 1: Translate, Matrices
    • Transform 2: Rotate, Scale

For Loop Example
In this example, a for{} loop is used to govern the (A) vertical position and (B) stroke color, of a set of horizontal lines.

// For Loop Example
size (300, 300);
 
background (255, 200, 200);
strokeWeight (3);
stroke(0, 0, 0);
fill (155, 255, 255);
smooth();
 
float leftEdge  = 30;
float rightEdge = 200;
float mySpacing = 20;
int   nLines = 14;
 
for (int i=1; i <= nLines; i=i+1) {
  float greyVal = map(i, 1, nLines, 0, 255); 
  stroke (greyVal);
 
  float yPosition = i*mySpacing;
  line (leftEdge, yPosition, rightEdge, yPosition);
  ellipse (rightEdge, yPosition, 13, 13);
}

For Loop With Random Numbers
In this example, a for{} loop is used to control the (A) fill color and (B) horizontal position of a set of circles. What happens if the line which declares and assigns the float variable “ry” is pulled outside of the for{} loop?

// For Loop With Random Numbers
size (300, 300);
background (255, 200, 200);
strokeWeight (2);
smooth ();
 
line (0,150, width,150);
for (int i=0; i < 10; i++) {
  float rx = i*30 + 15;
  float ry = random(140, 160);   // Y positions are randomized within 140..160
 
  float rGray = random(0, 255);  // Gray values are randomized within 0...255
  fill (rGray); 
  ellipse (rx, ry, 20, 20) ;
}

Live interaction with iteration (for loop):
This code demonstrates how a for{} loop can be used to draw a structure which responds in real-time to interactive input.

// Live interaction with iteration (for loop)
void setup() {
  size (400, 300);
}
 
void draw() {
  background(255, 200, 200);
  strokeWeight(3); 
  smooth( );
 
  for (int i=1; i<20; i++) {
    if (i == 8) {  // Equality test. Note the "double-equals" ( == ) !!!!
      stroke(255, 0, 0);
      line (width/2, 0, mouseX, mouseY);
    } 
    else {
      stroke (0, 0, 0);
      ellipse(i*20, mouseY-50, 25, 25);
    }
  }
}

Embedded Iteration
This is the classic “nested for{} loop”, in which one loop (controlling vertical position and green-ness) is nested inside an outer loop (which controls horizontal position and redness).

// Embedded Iteration
 
size (400, 400); 
background(255, 200, 200);
fill(255, 0, 0); 
smooth(); 
 
for (int x=1; x<20; x=x+1) {
  for (int y=1; y<20; y=y+1) {  
    fill (x*20, y*20, 0);
    ellipse (x*20, y*20, 14, 14);
  }
}