19 keyPresses

How can we integrate keyboard interactivity into our programs?

Vocabulary

keyIsPressed, keyPressed, ==, ===, keyCode, pmouseX, pmouseY, frameRate, frameCount

Study Questions

  1. What happens if we remove the background out of the draw() function?
  2. What is a frame in movies? What is a frame in p5.js?
  3. How are mouseX and mouseY used to draw? What role did pmouseX and pmouseY play in this?
  4. What is the difference between mouseIsPressed and mousePressed() function?

Activity

  • Watch Video #1 (below)
  • Create a canvas for the drawing app. You can use the following layout as well as examples shown in class for inspiration. You will create your own unique layout with your favorite drawing colors.
  • Drawing App Layout
  • Example Drawing APP Layout
  • Next, implement the ability to select a color and draw in that color using the mouse.
  • Define a variable for strokeWeight. Setup change in strokeWeight with the click of a button or press of + or - key; this is the thickness of the line.
  • Similarly, setup ERASE and RESET buttons.
    • Name your sketch and comment your code.
    • Use camelCase for variable, function names, or where ever appropriate.
    • Use variables for modifiable colors and other elements that the user could set at the top of the program.
    • Use functions for blocks of reusable code.
    • Discuss the answers to study questions.

Extensions

  • Setup different brush types.
  • Setup a slider for increasing or decreasing brush stroke.
  • Learn how to create buttons (use REFERENCE) and implement them for ERASE and RESET.

Resources

  1. Video: 18 Collision Detection and Importing a library
  2. Link: p5.collide2D - A 2D collision section library
  3. Link: Find keyCodes