Assignment: sound responsive face


Draw a stylized face in Processing. Requirements:

– A canvas size of 600 x 600

– Front view, not profile

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

– Use colors that don’t suck.
You can steal color palettes from here.
Create a new one with Kuler
Generate one from a picture with this tool

Making faces is easy. We are hardwired to recognize them.
Faces in things twitter

PART 2: Make it Responsive

For this assignment, you’ll add sound-interactivity using the audio add-on.

Include the audio component by adding this line to index.html just after the p5.js inclusion.

Start from a sketch.js like this (don’t worry if you don’t understand the audio setup part).

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);

Or just download the template p5Sound

Posted in