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:
keyCode === LEFT_ARROW
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:
keyCode === RIGHT_ARROW
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!