Keyboard Interactions

Table of Contents

• Why keyboard interactions are important
• The key variable
• Key events (keyPressed and keyReleased)
• Example for keyboard and mouse input
• Practice Problems

​

​

Why Are Keyboard Interactions Important?

• It’s used to get user input in your programs
• It allows users to use a greater variety of input values
• it can be a more convenient method of input, depending on its usage
• allows for simultaneous input, using both the mouse and the keyboard

The Key variable

• The key variable is a system variable, and it contains the value of the most recent key on the keyboard that was used
• This applies to both keys that were pressed and released or held
• The below program change the colour of the rectangle if the key pressed is B
• void draw() {� if (keyPressed) {� if (key == 'b' || key == 'B') {� fill(0);� }� } else {� fill(255);� }� rect(25, 25, 50, 50);�}

​

Key Events

KeyPressed()

• Function that’s called when user presses any key
• If key is pressed and held the function is called multiple times until key is released
• Only works with the draw() method
• The example creates a rectangle and changes the color of the rectangle if a key is pressed

int value = 0;�� void draw() {� fill(value);� rect(25, 25, 50, 50);� }�� void keyPressed() {� if (value == 0) {� value = 255;}

else {� value = 0;}� }

​

Note: To get keyboard input to work click anywhere on the output window first so you “focus” on the window (let it know that you are typing to the window)

KeyReleased()

• Function that’s called when user presses then releases any key
• Since the function is only called after the key is released, regardless of how long the user presses the key for the method will only be called once per key pressed (and released)
• Only works with the draw() method
• The example creates a rectangle and changes the color of the rectangle if a key is released

int value = 0;�� void draw() {� fill(value);� rect(25, 25, 50, 50);� }�� void keyReleased() {� if (value == 0) {� value = 255;}

else {� value = 0;}� }

​

Note: To get keyboard input to work click anywhere on the output window first so you “focus” on the window (let it know that you are typing to the window)

Summary

Keyboard Interaction Summary

Examples and Practice Problems

Practice Problems!

1. Create a program that outputs a black square to the screen. If a key is pressed, change the square color to red. After the square is red, if (any) key is pressed, change the square color to green.
2. Create a program that outputs a black square to the screen. If the ‘r’ key is pressed, change the square color to red. If the ‘g’ key is pressed, change the square color to green. If any other key is pressed, change/keep the square color as black.
3. Create a program that outputs a black square to the screen. If the key is pressed an odd number of times, change the color of square to green. If the key is pressed an even number of times, change the color of the square to red.
4. Create a program that outputs a black square to the screen. Each time any key has been pressed, change the side length of the square to # of times any key has been pressed * 10 pixels.

One more thing...

MCPT is participating in the Inside Ride!

• As many of you probably already heard, the Inside Ride is fast approaching!
• A MCPT Inside Ride team has already been assembled, but we need your help to raise money for its cause — providing financial support and services to the thousands of families and children suffering from the terrible aftermath of childhood cancer
• If you’re interested, please help us reach our goal of at least $300 in donations by December 6th!
• You can do so by donating in cash to any of our exec members who have the special envelope, or through a PayPal or credit card on our MCPT Inside Ride page!
• https://insideride-ontario-academic.greatfeats.com/team/mcpt-ninjas
• Every donation counts, no matter how much! Thank you!