3.1 Key Presses and Conditionals

Press a Specific Key

Until now, our drawing apps have only had two color options. Since we have many keys on our keyboard, we can add many different colors. To do so, we need to be able to pick specific colors using specific keys.

If you want to program different responses based on different key presses you will need to wrap one conditional inside another. The first conditional looks for any pressed key which is exactly what we had before. If a key is pressed, It will run through another conditional which looks for specific keys. The syntax to determine if a key is “equal” to a specific key is if(key == ‘g’) (replace ‘g’ with the key you want to detect).

Notice how we use two equal signs instead of one. One equal sign is used to assign a value to a variable, two (or three in some cases) are used to determine if one value is equal to another.

To check whether a key is pressed, we use two built-in variables. keyIsPressed is self-explanatory; key holds the last key that has was pressed. For alternative methods of handling key presses look into the Keyboard category in the p5 reference.

Try adding a green fill when the ‘g’ key is pressed and don’t change anything when no keys are pressed.

The default fill will be white and then when you press ‘g’ the fill should turn green.

Use these event handlers with else if to add more colors to your drawing app.

To test this sketch click on the canvas, then press r for red, g for green, and b for blue. m increases the size of the circle; l decreases it. Pressing the c key clears the canvas.

Text

If someone else wanted to use your drawing app, they might not be looking at your code, and they won’t know about the key controls that you programmed. A quick way to provide instructions is to add a key to your sketch using the text function which you may have seen before.

The text function requires three parameters. The first is a string.

A string is a sequence of characters. It can be letters, numbers or punctuation. Anything in quotes is read by the program as a string. If it is not in quotes, the program will not know what to do with the information and the code won’t run.

The string will be the text that you would like to write on the screen such as ‘r = red’ which you will write in quotes. The next two parameters will be the x and y location of the text. Play with the string and location of the text here. Use the p5 reference to change the size and color of the text as well.

Now you can add a key to your drawing app using the text function. By adding text to the canvas, you ‘ll be able to provide instructions for your users.

Draw Letters to the Screen

To draw keys to the screen use the text function. See the p5 Typography reference for more information on changing style, size, and other text attributes.

To test the example below, remember to click on it before typing.