Assignment: Sound Responsive Face

Make your face sketch sound-responsive by animating several visual elements in relation to the given sound clip.


Same as the face
+ Animate at least 5 visual elements

Make a fork of the character so you still have the static one as separate submission.


Post it on the openprocessing classroom with a proper title and a thumbnail image.

Grading criteria

Same as the face
+ the character doesn’t just quiver but looks like they are singing
+ the character changes the expression with the volume
+ the face doesn’t “break” at high volumes

Template and setup

Template sketch

This sketch already has a sound file and the audio setup along with a bunch of examples.
Fork it (make a copy) with the fork button on the top right
Put your face code in the draw function and think about what parts of it makes sense to animate in response to the sound volume.

Video Explanation below (the video uses a microphone instead of a sound clip but it’s the same principle).

Make sure the sketch is unmuted – speaker icon on the top right

Make sure the browser tab is also unmuted and the computer is playing sound from the speakers or headphones

Optional: using sound on openprocessing

If you want to make a sound-enabled sketch instead of forking the example above you have to:

1- Upload the sound files as mp3:
code settings on the right > files > upload an mp3
2- Change loadSound(‘filename.mp3’); using your file name. You may want to rename your file to something simple before you upload it.
3- Include the p5.sound add on by opening the menu on the right and activating the switch:

4- All the sound functions are in this section of the manual p5.sound