1. Keyboard and Events

2. What about the keyboard? Keyboard inputs can be used in many ways---not just for text The boolean variable keyPressed is true if a key is pressed and false if not. keyPressed is true as long as a key is held down // Draw a line when any key // is pressed void setup() { size(100, 100); smooth(); strokeWeight(4); } void draw() { background(204); if (keyPressed == true) { line(20, 20, 80, 80); }

3. Another example with keyPressed // Move a line while any key is pressed int x = 20; void setup() { size(100, 100); smooth(); strokeWeight(4); } void draw() { background(204); if (keyPressed == true) { // If the key is pressed x++; // add 1 to x } line(x, 20, x-60, 80); }

4. You can also display text The key variable is of type char and stores the most recently pressed key PFont font; void setup() { size(100, 100); font = loadFont("Tahoma-Bold-18.vlw"); textFont(font); } void draw() { background(0); text(key, 28, 75); }

5. But characters are really numbers Each character has a numerical value defined by the ASCII codeASCII code int x = 0; void setup() { size(100, 100); } void draw() { if (keyPressed == true) { x = key - 48; rect(x, -1, 20, 101); }

6. Coded Keys Processing can also read the value from other keys such as the arrow keys, Alt, Shift, Backspace, Tab and others (see page 227) Check that the key is coded first: key==CODED color y = 35; void setup() { size(100, 100); } void draw() { background(204); line(10, 50, 90, 50); if (key == CODED) { if (keyCode == UP) { y = 20; } else if (keyCode == DOWN) { y = 50; } } else { y = 35; } rect(25, y, 50, 30); }

7. In-class exercise Use the arrow keys to change the position of a shape within the canvas.

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

9. Refresher… Today we will review events for event driven programs. First event driven program void draw() { frameRate(4); //fps = 4 println(frameCount); }

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

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

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

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

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

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

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

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

18. keyPressed() & keyReleased() 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); } } //continued on next slide

19. keyPressed() & keyReleased() void keyPressed() { if ((key == 'T') || (key == 't')) { drawT = true; } void keyReleased() { drawT = false; }

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

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

22. letters.substring(), letters.length() and textWidth() letters.substring() –http://processing.org/reference/String_substring_.htmlhttp://processing.org/reference/String_substring_.html letters.length() –http://processing.org/reference/String_length_.htmlhttp://processing.org/reference/String_length_.html textWidth() –http://processing.org/reference/textWidth_.htmlhttp://processing.org/reference/textWidth_.html

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

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

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

26. Eventful review Classes of events –Mouse –Key –Timer (alarm)

27. Mouse event handlers mousePressed() –Called once when any mouse button is pressed mouseReleased() –Called once when any mouse button is released mouseMoved() –Called often while mouse is moved mouseDragged() –Called often while mouse is moved with button pressed An example to try out

28. Key event handlers keyPressed() –Called once when any key is pressed –Be careful about keys that are held down! keyReleased() –Called once when any key is released

29. Timer events and their controls draw() –Called at regular intervals frameRate(freq) –Sets the interval to 1/ freq seconds noloop() –Turns off the regular calls to draw() loop() –Turns on the regular calls to draw() redraw() –Makes a single call to draw()

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