22 Images

How can we load images and manipulate the position, size, and tint of an image in p5.js?

Vocabulary

Preload function, tint, transparent, file type, Usage Rights for media

Study Questions

  1. What is the purpose of the preload( ) function?
  2. Why must we consider the usage rights of media before downloading and using it in our programs?
  3. Explore p5js reference to view other functions/methods available for images.

Activity

  • Watch Video #1 (below)
  • Create a vision board.
  • Gather images that represent your dream life in the coming year. (Don’t care so much about the coming year? Think about your dream life after high school, or after college.)
  • Figure out a way to display these images that is fun, interesting, and reinforces your dream. (If your dream is to be more organized, maybe your board reflects that!)
  • Use tint to create a foreground, middleground, background, and/or to make the images go better together.
  • Make your vision board interactive! Make something change or appear when a the mouse hovers over a certain area, when the mouse is clicked, or when a button is pressed.
  • Answer the following three questions on the top of your code.
    //Name:  
    
    //What is your vision for your life?
    
    //What are things you will need to do to make your dreams a reality?
    
    //How does this program capture that?
    
    //Your Code below
    
    • 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.

Resources

  1. Video: 21 Images
  2. Video: Uploading Media Files
  3. Image: Vision Board Example