Continuous

Flow of Control

• Programs can broadly be classified as being – Procedural

• Programs are executed once in the order specified by the code varied only by loops and function calls.

– Event Driven• Programs run continuously responding to input

events such as key strokes or mouse clicks.

How Do Those Classification Pertain to Our Class

• All the programs we have written or looked at so far are procedural.

• Today we look at event driven programs.• First event driven program

void draw() {

frameRate(4); //fps = 4

println(frameCount);

}

What Happened?

• About 4 times per second, a number (the frame count) was printed to the console window.

• Why? – There’s no for loop or while loop?

• The draw() function is processed continuously by the event handler until another event is triggered or you press the STOP button.

Next Program

float y = 0;

void draw() {

frameRate(10);

line(0, y, 100, y);

y = y + 0.5;

}

How Can We Produce the Following Sketch?

• Change the line

y = y + 0.5;• To

y = y + 1.5;

More with Draw()

• To clear the window at every frame, put a background() command at the beginning of draw().

• background() doesn’t have to use a constant value as its argument, change it to use an expression with y.

setup()

• For instructions that just need to be run once, use setup().

• This is where you might– Set the screen size– Compute some “constants”– Set graphic characterics

setup()float y = 0;float increment = 0.5;void setup() { size (100, 100); smooth(); fill(0);}

void draw() { frameRate(10); background(50+y*2); line(0, y, 100, y); if (y > height) increment *= -1.0; y = y + increment;}

Variable Scope

• What happens if you declare y – At the top– In draw– In setup

Scope

• When a variable will change in each iteration of draw, declare it outside of setup() and draw().

Why?

• When a variable is created within a code block, it can be used only within that block. It will be destroyed with the program leaves the block.

Think locally

• Adding variables outside of setup and draw “to be safe” makes your program harder to read

• For clarity, use the smallest possible scope

In-class Lab 1

• Create a shape that moves from one side of the canvas to the other. When it reaches the opposite edge have it reverse direction and continue back and forth endlessly.

• For maximum credit make sure your code will work if the window size is set differently.

In-class Lab 2

• Have your groundhog move around the screen

• And change size or color

Random Numbers

• Assumefloat f;

• To generate a pseudo random number between 0 and high and assign it to f

f = random(high);

• To generate a pseudo random number between low and high

f = random(low, high);

Printing Random Numbers

for (int i=0; i<10; i++) {

print(i + ". ");

println(random(100));

}• How do the print statements print

and println differ?

• What’s the + inside of a print

Sample Code

float f = random(5.2);

// Assign f a float value from 0 to 5.2

int i = random(5.2);

// ERROR! Can't assign a float to an int

int j = (int)random(5.2);

// Assign j an int value from 0 to 5

Sample Code

smooth();

strokeWeight(10);

stroke(0, 130);

line(0, random(100), 100, random(100));

line(0, random(100), 100, random(100));

line(0, random(100), 100, random(100));

line(0, random(100), 100, random(100));

line(0, random(100), 100, random(100));• Modify the 5 method calls above to line() to use a for loop

and one line()call.• Why would a for be a better construct than a while?

Sample Codesmooth();

strokeWeight(20);

stroke(0, 230);

float r = random(5, 45);

stroke(r * 5.6, 230);

line(0, r, 100, random(55, 95));

r = random(5, 45);

stroke(r * 5.6, 230);

line(0, r, 100, random(55, 95));

r = random(5, 45);

stroke(r * 5.6, 230);

line(0, r, 100, random(55, 95));• Write the above code to use a for loop.

In-class Lab

• Begin with your face code which you can download from the student work section of the syllabus page.

• Modify some part of your face code so that one of your features changes in a random, yet somewhat realistic in a humanoid way.

Sample Code

//lip points

float lipPointLeftX = random(105,145);

float lipPointRightX = random(171,211);

//outer lip

bezier(lipPointLeftX, 216, random(136,156), 213, random(157,177), 213, lipPointRightX, 216);

bezier(lipPointLeftX, 216, random(150, 170), 261, random(181,209), 216, lipPointRightX, 216);

//inner lip

bezier(lipPointLeftX, 217, 148, 220, 167, 222, lipPointRightX, 216);

bezier(lipPointLeftX, 217, 162, 245, 191, 216, lipPointRightX, 216);