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.
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 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!