Post on 18-Jan-2018
description
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);