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 and mouseY 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.


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

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?