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