# 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.

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

• 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);
}
}```