imagesAndSounds.md

Topics covered in class

DOWNLOAD IMAGE AND SOUND FILES HERE

• This week we will be looking at

  • loading images
  • displaying parts of the image
  • animating sprites
  • loading and playing sounds
  • Making a small music player
  • recording sound with a mic

• Working with images in p5

  • If we are using a local file, upload it onto the p5 editor. Best practice is to put images/ fonts/ sounds in its own folder. You can create a folder called assets and put it in there
  • Once uploaded, you will have to load the image into p5 and store it in a variable. Remember to do this in the ‘preload’ function
  • After that you can use the (image)[https://p5js.org/reference/#/p5/image] function to display the image

• Get function in image

  • You can use the get function in 2 ways. If you give it ONLY x and y values, it gives you the rgb value for that single pixel.
  • If you give it 4 values - x, y, width, height - it will give you the pixel values of that part of the image. Meaning, you can display it as an image!
  • Note: You can display a part of the image using the (image)[https://p5js.org/reference/#/p5/image] function, but an easier way to do it would be using the (image.get)[https://p5js.org/reference/#/p5.Image/get] function

🔴💻Example - display a cat image, and tint it

🔴💻Example - make a "generative portrait" of a cat using img.get

• Sprites
  • A spritesheet has various parts of a charecter animation linearly layed out.
  • We can use img.get to break them up into smaller images and the store them in an array
  • We can then loop through the array and display the images sequwntially to create the illusion of movement
  • PS - This is going to be very helpful when you are working with games.

🔴💻Example - working with a spritesheet which has one animation

🔴💻Example - working with a spritesheet which has multiple animations

• Sounds
  • You can load a sounds similar to image. In preload, using a function called loadSound
  • You can play the sounds by saying mySound.play

🔴💻Example - playing a sound

🔴💻Example - recording AND looping a sound (Issue to be fixed still)