18 Collision Detection and Importing a Library

How can libraries help us further extend the capabilities of our programs.

Vocabulary

Library, importing, CDN, Github, Documentation, function, parameters, arguments

Study Questions

  1. What is a library in programming?
  2. When should you use a library?
  3. What libraries are available to extend the functionality of core p5.js?
  4. How can you import a library into your p5.js project?
  5. What is the purpose of the collision detection library explored in this lesson?

Activity

  • Watch Video #1 (below)
  • Draw a Haunted House/Castle/Mansion. Explore images on google search using keywords “haunted house drawing”, “castle drawing”, or “mansion drawing” for ideas.
  • Create six clickable buttons that turn on lights in different parts of the castle and initiate some spooky effects.
  • Plan and create a button combination so that if this six button combination is hit, then all lights in the haunted castle turn on simultaneously.
  • Create a well-designed styled webpage.
  • Define the vocabulary from this lesson. Use font size or style to emphasize Vocabulary Word and its definition clearly. See template shown above.
  • Answer the study questions. Use font size or style to emphasize each question and answer pair clearly.
  • 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.

Extensions

  • Anyone who finds the six-button combination is the winner of this Haunted Castle - Switch Game. Create a Game Completed Screen that appears when someone gets the combination right.

Resources

  1. Video: 18 Collision Detection and Importing a library
  2. Link: p5.collide2D - A 2D collision section library
  3. Link: Mouse Interactivity Examples from p5js.org