2.5.2 - Key Presses in P5.js

Key Press Tutorial

Open this link then click on the next slide

https://editor.p5js.org/cmorgantywls/sketches/ZP31L3Dx4

Labelling

Place the choices to the right of the correct spot.

Drag labels to their correct position on the image

declares the variable

initializes the variable

uses the variable

Dropdown

Line #1 ​

Select answer

the variable to hold the ​

Select answer

for the upper left circle.



Line # 5 ​

Select answer

the color variable to give a starting off value.



Line #11 replaces 255 with ​

Select answer

.

​Add what we just did to your code

Drag and Drop

if( ​

Placeholder

&& key == '​

Placeholder

'){

cCol1 = color(​

Placeholder

) //red}

Drag these tiles and drop them in the correct blank above

keyIsPressed

r

255, 0, 0

mouseClicked

b

100, 100, 100

keyPressed

c

0, 0, 255

Multiple Choice

What does pressing the 'g' key on the keyboard do?

• It rotates the object 90 degrees.
• It increases the size of the object.
• It changes the color of the object to blue.
• It changes the color of the object to green.

Edit your code

​Add another keypress to turn the circle blue

Poll

How comfortable are you with using "keyIsPressed" in your code?

• 👎

  I definitely need help

• 👌

  I feel OK

• 👍

  I know how it works

Reorder

All code snippets below accomplish the same task, but with different levels of efficiency.

Rank them in the order of least efficient code to most efficient.

1

2

3

• 1
• 2
• 3

Open Ended

Why is code snippet 2 more efficient than code snippet 1?

Open Ended

Why is code snippet 3 more efficient than code snippet 2?

Complete the rest of the assignment