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.
<script src="addons/p5.sound.js"></script>

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