Similar to how we can use mouse input to perform actions in our p5.js sketches, we can also use key events for interaction! These key events are used with general key input or for detecting specific key presses.
The built-in variable keyIsPressed evaluates to true when any key is pressed and false otherwise. Any code written in an if statement with the keyIsPressed conditional will run continuously as long as a key is being pressed. keyIsPressed can be combined with either key or keyCode to check key presses.
The keyPressed()function is called once every time a key is pressed. Since the function is only called once per key press the code will also only run once per press. Within the function block, it’s possible to test which key has been pressed and to use this value for any purpose.
Take a look at keyEvents.js on the right. The code highlights the different functionalities of keyIsPressed and keyPressed(). While a key is pressed, the code inside the if statement constantly runs, increasing the size of the shapes drawn in the sketch. At the same time, when the key is pressed, the keyPressed() function will change the color of the shapes, but only once, until the key is released and pressed again.
There are other key event functions offered by p5.js, such as:
- The
keyReleased()function, which can be used to trigger an event every time a key release is detected. - The
keyTyped()function, which can be used to determine each time a specific key is pressed. Note that the function cannot detect special keys but can distinguish between lower-case and upper-case letters. - The
keyIsDown()function, which can be used to check if a key is currently being pressed.
Instructions
Take a look at the recreation of the classic arcade game Pong on the right. It has a problem—there is no interaction!
Open sketch.js. To begin, we will add movement to the paddle. After the draw() function, create an empty keyPressed() function.
Inside the function, create an if statement with the following condition:
In the if statement’s code block decrement the paddlePosX variable by 50.
Create an else if statement after the if statement with the following condition:
Inside the else if code block, increment the paddlePosX variable by 50.
Now, run the code and press the right and left arrow keys. The paddle should be able to move and bounce the ball back!
Next, let’s program a reset button for the game.
Create an if statement at the end of the draw() function. In the if statement, check if a key is pressed and (&&) if the key pressed is the spacebar (' '). Use the keyIsPressed variable and the key variable inside the conditional statement.
Inside the if statement we just created, set the ballPosX variable back to its starting value of 50 and the ballPosY variable to 50. Also, change the started boolean to false.
Now, whenever you press the spacebar the game will reset. When the spacebar is released a new game will begin!