Lecture 05

Lectures are henceforth renumbered, to maintain parity with the Assignments. This lecture is associated with Assignment 5, due Monday, October 1.

But first:
Michael Hansmeyer on Generative Form-Making (11′, from TED):

Additional examples of generative art developed from iteration + randomness:

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

Discussion topics for Monday 9/24:

  • Basic mathematics and order of operations;
  • Variables: integers vs. floats
  • integer vs. float mathematics
  • brief mention of char, byte, String, boolean variables
  • random()

New Topics for Wednesday 9/26:

Towards greater sophistication.

  • translate(), scale(), rotate()
  • map(), constrain()

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

Conditional Testing and Interaction
The if{} structure, with discrete and continuous mouse data.

  • Introduction to conditional testing. if (mouseX > val)
  • Interactions based on discrete mouse data: if (mousePressed)
  • The mousePressed() method
  • A latch, which calls draw() only after mousePressed().

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);
  }
}
Posted in