19 keyPresses
How can we integrate keyboard interactivity into our programs?
Vocabulary
keyIsPressed, keyPressed, ==, ===, keyCode, pmouseX, pmouseY, frameRate, frameCount
Study Questions
- What happens if we remove the background out of the draw() function?
- What is a frame in movies? What is a frame in p5.js?
- How are mouseX and mouseY used to draw? What role did pmouseX and pmouseY play in this?
- What is the difference between mouseIsPressed and mousePressed() function?
Activity
Watch Video #1 (below)- Create a canvas for the drawing app. Examples will be shown in class for inspiration. You will create your own unique layout with your favorite drawing colors and tools.
- 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. You may also use sliders if you opt for html selection buttons and other controls.
- Similarly, setup ERASE and RESET buttons.
- 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.
- Define the vocabulary from this lesson. Use font size or style to emphasize Vocabulary Word and its definition clearly.
- Answer the study questions. Use font size or style to emphasize each question and answer pair clearly.
- Comment your code.
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.
- Allow the user to select among a few background types.
- Allow the user to save their drawing.
- Create a app HELP tab.
Resources
- Video: 18 Collision Detection and Importing a library
- Link: p5.collide2D - A 2D collision section library
- Link: Find keyCodes