The p5.js library has the ability to store data from the keyboard input for a variety of uses. For example, suppose we wanted to know when a certain key was typed and have that key trigger a unique event or have key input be part of a game. Both are possible in p5.js!
But before we get further into the details of key input in p5.js, it is important that we have a basic understanding of ASCII code, the standard representation of characters that allows computers to understand key inputs.
ASCII stands for the American Standard Code for Information Interchange and is a 7-bit character code where each bit represents a unique character. For example, the lowercase ‘a’ in ASCII code has a decimal value of 97, the hexadecimal value of 61 in, and the binary value of 1100001. This numeric representation in decimal value is important to remember. This ASCII table provides a full list of the code.
Now that we have a basic grasp of ASCII, let’s dive into key input!
The built-in key
variable stores alphanumeric characters. More specifically, it holds the value of the most recent key pressed. So if the most recently pressed key was f
and we were to console.log(key)
then it would log f
to the console.
This means that the key
variable can also be used to determine if a specific key was pressed. In the example below, we are using an if
statement to draw some text if the key
value pressed is a
.
// If the 'a' key is pressed, draw the following text in the canvas if (key === 'a'){ textSize(22); text('a key was pressed!', width / 2, height / 2); }
It is important to note that key
works best with non-special keys such as ‘a’, ‘t’, and ‘x’.
The other important key input variable we are going to learn about is the keyCode
variable. The keyCode
variable stores the decimal value of the ASCII code of the most recently pressed key. It can also be used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, and more. A larger list of special keys can be found on the p5.js keyCode reference page.
Similar to the example code above, the code below will draw text to the canvas when the correct keyCode
input is detected. In this instance, that input is 32
which is the ASCII code’s decimal value for the space character.
// If the spacebar is pressed, draw the following text in the canvas if (keyCode === 32) { textSize(22); text('The spacebar key was pressed!', width / 2, height / 2); }
If you are not familiar with the text()
and textSize()
functions used in the examples above, the text()
function is used to draw text onto the canvas. The textSize()
function sets the size of the text.
While the key
variable can detect both uppercase and lowercase characters, the keyCode
variable is unable to differentiate the ASCII values from each other. For example, if we were to print the keyCode value of ‘a’ and ‘A’ both would print out the number 65, even though the decimal value of the ASCII code of ‘a’ is 97.
Instructions
In sketch.js, there is a maze with text at the top-left corner of the canvas saying “Make it to the end of the maze!”
On line 29, the text()
function call is where the static 'Make it to the end of the maze!'
text is displayed. Replace the static text with the key
variable.
Now run the code and type to see each letter appear at the top-left corner of the canvas.
Use the ASCII table to assign the correct ASCII decimal values of the A
, S
, D
, and W
variables defined in the setup()
function.
Use the keyCode
variable to make the existing rectangle move from the start of the maze to the end with the ‘A’, ‘S’, ‘D’, and W’ keys.
To begin, inside of the draw()
function, create an if
statement where the conditional is checking if the value of the keyCode
variable is equal to the variable A
. If it returns true
, decrement the xVal
variable by 5.
Next, create an else if
statement, again checking the keyCode
value but this time to see if it equals to D
. If it returns true
, increment the xVal
variable by 5.
Continuing with the format, create a third else if
statement and check to see if keyCode
is equal to S
. If it returns true
, increment the yVal
variable by 5.
Create one last else if
statement and check if keyCode
is equal to W
. If it returns true
, decrement the yVal
variable by 5.
Now run the code and use the ‘A’, ‘S’, ‘D’, and W’ keys to move the rectangle from the top of the maze to the bottom. Try not to go over any of the walls!