Experiment 4 - Sound and Images

Imitate

I took this example because I wanted to work on something with the microphone. It is a ball that bounces based on the microphone sound input.

Integrate

  • First I tried to get the microphone to change the color of the ball, because I always start with color. This did not work, but I immediately got interested in making the ball jump higher
  • did not understand what was done before, so I mapped the input * 150 (input is 0 - 1) to the height, which made the ball start at the top and go downwards with sound.
  • I did not know why, but I thought that I saw the input change the size of the ball so I changed my attention to making sound change the height AND size of the ball (I read the code wrong, it only changed the height).
  • As I got more used to the sound only being from 0 to 1, I got the ball to start at the bottom (I was confused about the y position) and made it so that the size and height change more dramatically with sound. The color also can change from white to black.
  • I did not know how to make the colors change into more than white or black so I looked into images. I saw this example and wondered if I could make the ball an image that grew and shrank.

Innovate

  • I put an image in where the ball was and made it grow based on microphone input. I got the image to be in the middle of the screen even when the width was changing which was difficult because I could not find the origin point.
  • I felt like the code was finished because it was funny watching the image grow like it was talking and bouncing.
  • But then I wanted more bouncing images to follow the main image, so I looked at another example to create more images at lower opacities.
  • I wanted there to be a trail of the same image that lags behind the main one, but then ended up making a flappy bird clone
  • I put a new image that moves up if the sound is high and down if the sound is too low. It does not flow well since it does not have any velocity.
  • I wanted there to be more movement so I tried to get the image to bounce around the screen. Louder = faster, quiet = slower

Reflection

  • I did all the work on my own again. I don't feel like I "innovated" a lot, but it is very funny looking at my work.
  • I did not get the trail of images that lag behind, but I still like how funny it is

Results

Please allow microphone use. The whole thing relies on the microphone sound. If nothing shows up, then just use this link (https://editor.p5js.org/btrieu2/sketches/eC1CJ1x90), allow the microphone use, and click "Run".