Events

1. Events March 18, 2009

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. Refresher… • Today we look at events for 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. More on Why • Specifically the draw() function is called 4 times per second since we set the frameRate to 4. • Remove the frameRate() line and see what happens. • What’s the default frame rate?

6. Next Program float gray = 0; void setup() { size(100, 100); } void draw() { background(gray); } void mousePressed() { gray += 20; }

7. Change It • Change the mousePressed() to mouseReleased(). • What happens differently? • Move the background() call to mouseReleased(). Now draw() is empty? Can we remove it? • Why or why not? • Add a background() call inside draw() • What happens? Why?

8. draw() • Event Driven Programs • Programs run continuously responding to input events such as key strokes or mouse clicks. • Without the draw() function, our program is no longer listening for events.

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

10. For Something Different void setup() { size(100, 100); fill(0, 102); } void draw() { } // Empty draw() keeps the program running void mousePressed() { rect(mouseX, mouseY, 33, 33); }

11. mouseMoved() & mouseDragged() • What’s the difference between a dragged mouse and a moved mouse? If you don’t know, run this program and find out! int dragX, dragY, moveX, moveY; void setup() { size(100, 100); smooth(); noStroke(); } //continues on next slide

12. mouseMoved() & mouseDragged()[continued] void draw() { background(204); fill(0); ellipse(dragX, dragY, 33, 33); // Black circle fill(153); ellipse(moveX, moveY, 33, 33); // Gray circle } void mouseMoved() { // Move gray circle moveX = mouseX; moveY = mouseY; } void mouseDragged() { // Move black circle dragX = mouseX; dragY = mouseY; }

13. Built-in Variables • mouseX • mouseY • What do you think these are? Look at the code you just ran? If you need to print them out to help figure out what they are.

14. Key Events • keyPressed() • keyReleased() • Look for the built-in or predefined variable key. What is it? • A character value is depicted in single quotes like ‘a’. But an ‘a’ also has a numeric representation which is the value 97. You can look at an ascii table to see all character values. The character value ‘A’ is equal to 65. What is the character ‘Q’ equal to?

15. Another keyPressed() Example - testing a value boolean drawT = false; void setup() { size(100, 100); noStroke(); } void draw() { background(204); if (drawT == true) { rect(20, 20, 60, 20); rect(39, 40, 22, 45); } } //contined on next slide

16. Another keyPressed() Example - testing a value void keyPressed() { if ((key == 'T') || (key == 't')) { drawT = true; } } void keyReleased() { drawT = false; }

17. Using Strings // An extremely minimal text editor, it can only insert // and remove characters from a single line PFont font; String letters = ""; void setup() { size(100, 100); font = loadFont("Eureka-24.vlw"); textFont(font); stroke(255); fill(0); } void draw() { background(204); float cursorPosition = textWidth(letters); line(cursorPosition, 0, cursorPosition, 100); text(letters, 0, 50); } // continued on next slide

18. Using Strings void keyPressed() { if (key == BACKSPACE) { // Backspace if (letters.length() > 0) { letters = letters.substring(0, letters.length()-1); } } else if (textWidth(letters+key) < width){ letters = letters+key; } } • What do you think letters.substring(), letters.length and textWidth() do?

19. letters.substring(), letters.length() and textWidth() • letters.substring() • http://processing.org/reference/String_substring_.html • letters.length() • http://processing.org/reference/String_length_.html • textWidth() • http://processing.org/reference/textWidth_.html

20. Flow Control • frameRate() • Sets a limit as to how many frames are displayed per second • loop() • Resumes continuous draw() calls • noLoop() • Stops draw() from repeated being called • redraw() • Calls draw() once

21. int frame = 0; void setup() { size(100, 100); frameRate(30); } void draw() { if (frame > 60) { // If 60 frames since the mouse noLoop(); // was pressed, stop the program background(0); // and turn the background black. } else { // Otherwise, set the background background(204); // to light gray and draw lines line(mouseX, 0, mouseX, 100); // at the mouse position line(0, mouseY, 100, mouseY); frame++; } } void mousePressed() { loop(); frame = 0; }

22. Run This and Then Remove Comments in setup() void setup() { size(100, 100); //noLoop(); // what happens when noLoop is uncommented } void draw() { background(204); line(mouseX, 0, mouseX, 100); } void mousePressed() { redraw(); // Run the code in draw one time }

23. Your Turn • Create a shape that has events defined for mousePressed, mouseDragged, mouseReleased and keyPressed where key equals some particular value. For example an ‘L’ draws a line.