Assignment: sound Face


Create a sketch that display a face. We are going to make it sound responsive.

– Front view, not profile

– Don’t try to recreate an existing character

– Use at least 10 graphic elements. Use the drawing functions I covered in class but also try something new from the reference.

– I recommend to not use shapes with strokes, it will be much easier to create complex shapes (you can still use lines for elements like eyebrows or mouth)

– Try to use non random colors schemes
Steal a color scheme from a reference image
You can look at color palettes from here.
Create a new one with Kuler
Generate one from a picture with this tool

Can you make it sound responsive?

var input;
var analyzer;
var volume = 0;

function setup() {
createCanvas(600, 600);

// Create an Audio input
mic = new p5.AudioIn();

// start the Audio Input.
// By default, it does not .connect() (to the computer speakers)

function draw() {

// Get the overall volume (between 0 and 1.0)
var v = mic.getLevel();
// "Smooth" the volume variable with an easing function
volume += (v-volume)/3;


ellipse(200, 200, 100,100);
ellipse(400, 200, 100,100);

// Draw an ellipse size proportionally to the volume
var mouthSize = map(volume, 0, 1, 10, 300);

ellipse(300, 300, mouthSize, mouthSize/2);

Eyes following mouse (without trigonometry)

sketch here