Exploring Keyboard Inputs in Programming

1. Keyboard and Events

2. What about the keyboard? // 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); } } • 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

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

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 thebackground() call tomouseReleased(). Nowdraw() 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 thinkletters.substring(), letters.lengthandtextWidth() do?

22. letters.substring(),letters.length() andtextWidth() • 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

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.