1. Continuous

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

3. 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); }

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

5. Next Program float y = 0; void draw() { frameRate(10); line(0, y, 100, y); y = y + 0.5; }

6. How Can We Produce the Following Sketch? • Change the line y = y + 0.5; • To y = y + 1.5;

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

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

9. 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; }

10. Variable Scope • What happens if you declare y • At the top • In draw • In setup

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

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

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

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

15. In-class Lab 2 • Have your groundhog move around the screen • And change size or color

16. Random Numbers • Assume float 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);

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

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

19. 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?

20. Sample Code smooth(); 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.

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

22. 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);