Learn
Congratulations! You now have the fundamentals of interaction in p5.js down. Throughout this lesson we covered a range of mouse and key interactions that help to bring more possibilities to your projects.
Here is a review of the main points covered in the lesson:
- How to use
mouseX
andmouseY
to track mouse position, modify shapes, determine shape positions, and more! - Using the built-in
mouseIsPressed
variable to detect mouse presses and trigger events from the presses. - How to use the
mousePressed()
function to trigger events when the mouse button is pressed over the current canvas element. - How to use the
dist()
function to calculate the distance between two points. - Using the
key
variable to store the alphanumeric value of the most recent key pressed. - Detecting special keys and ASCII character values with the
keyCode
variable. - How to use the
keyIsPressed
boolean to detect general key presses. - Using the
keyPressed()
function to trigger events when a key is pressed.
Instructions
Explore the pong sketch some more. Try using some different key events for other types of game interaction like creating a second ball or having the paddle move along a different axis.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.