This week, I wanted to do something a little silly. Using microphone input and external images, I thought it would be kind of funny, if the user’s voice could move a mouth on an existing image.
I used the iconic meme legend himself, Mr. Bubz and gave him a human mouth, by loading different images into p5.js.
Creating microphone input, was surprisingly the easiest part of this project. Following Dan’s tutorial it was pretty straightforward creating a mic object, starting it, and retrieving the volume value by using getLevel(). These functions were similar to the FFT ones I used last week in that to analyze sound in a certain way, you need o create a specific p5 object from the sound library, initialize it (start vs. analyze) and then can used a more specific function to retrieve data (getEnergy() vs. getLevel()).
The challenge came in creating a realistic mouth to move to the volume of microphone input. I started by using an ellipse to represent the mouth, but I didn’t like how awkward it was. This led to uploading a second image and delving a little into the 3D modeling functions. I thought if I could map the mouth to an ellipse that would give me more control. I wasn’t sure if I could just use map() though, so a friend suggested texturizing an ellipse.
I only wanted the height of the mouth image to move to emulate opening and closing in a funny way, so I added the volume of the mc input to the height of the teeth image.
However, this distortion is really off and now the mouth seems to grow on an diagonal. I’m not sure what is causing this. Maybe there is an actual distortion function that would be better? How can I fix this?
Check out the sketch here.
