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 highf = 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.2int i = random(5.2); // ERROR! Can't assign a float to an intint j = (int)random(5.2); // Assign j an int value from 0 to 5

Sample Codesmooth();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 pointsfloat lipPointLeftX = random(105,145);float lipPointRightX = random(171,211);

//outer lipbezier(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 lipbezier(lipPointLeftX, 217, 148, 220, 167, 222, lipPointRightX, 216);bezier(lipPointLeftX, 217, 162, 245, 191, 216, lipPointRightX, 216);