Sound Responsive Face

For this assignment, you’ll add sound-interactivity to your face using the Minim audio library.

Check and see if Minim is already installed (under Sketch->Import Library).
If not, you’ll need to download and install Minim, from here

The following files can be downloaded from here.

Your Processing project will have two files.
The first, main app file will be:


void setup(){

void draw(){

  // Draw the mouth.
  getVolume(); // this call fetches the mic volume for the current frame.
  float Y = map(volume, 0,100, 2,120);  // now we can use it for something!

  ellipse(200,200, 100,Y); 

  // The rest of the code just draws the Eye:
  float ex = 200;
  float ey = 100;
  ellipse(ex,ey, 60,60);
  float dx = constrain((mouseX-ex)/20, -14,14);
  float dy = constrain((mouseY-ey)/20, -14,14);
  ellipse(ex+dx,ey+dy, 20,20);

Now click on the little (+) to create the second file, which will get its own tab.
Name this file MyAudioHandler.pde, and input the following text.
Don’t otherwise change this code:

// Don't worry about understanding the stuff below!
import ddf.minim.*;

Minim minim;
AudioInput in;
float volume = 0;
float volumeF = 0; 

void setupAudio(){
  minim = new Minim(this);
  in = minim.getLineIn(Minim.MONO, 512);

void getVolume(){
  volumeF = in.right.level()*1000;
  volume = 0.8*volume + 0.2*volumeF;

void stop(){

Please note that the resulting app will not work in a browser because of security restrictions.
That’s OK.

The map function is crucial for this assignment.

float myVariable = map(volume, 0,100, 1,200);

In this snippet, myVariable will assume a value between 1 and 200 in relation to the value of volume.
0 (silence) -> 1
200 (maximum noise) -> 200
All the in-between values will be scaled proportionally.

Map can produce negative values

float myVariable = map(volume, 0,100, -100,100);

Or invert the scale

float myVariable = map(volume, 0,100, 500,0);



Make a face responsive to the microphone activity. It should simpler (more iconic) than the previous one. It would be much easier if it’s frontal or full profile.
If you are particularly attached to the previous one feel free to adapt that one.


  • If stylized character design is not one of your strengths, look for inspirations in the pictoplasma Flickr pool
  • Sometimes a good color scheme can really push a design piece to da next level. Try to steal some cool schemes from the colourlovers community
  • Volume can affect colors, positions, sizes, portion of arcs, control points in curves
  • Always backup your projects. Careful the name of the folder must correspond to the name of the main file. es: soundFaceBackup must contain soundFaceBackup.pde and MyAudioHandler.pde.
  • The easiest way to mash up this sketch with the previous one is copy the instructions from the static face to the dynamic example and not viceversa.
  • Don’t put other .pde files in your folder unless you know what you are doing, it may confuse Processing. You should have only 2 open tabs, the face sketch and the microphone handler.
  • Don’t get too obsessed if some shape breaks or overlaps, the microphone handler is not 100% reliable and may occasionally shoot some weird levels. The function constrain(var, min, max) can also be used to limit values.

Bonus points if:

  • you add mouse interactivity.
  • you make a better face.

Due Date: Monday 12
Bring the folder to class, unfortunately the browser version on openprocessing won’t be sound responsive.

Posted in

One comment

Post a comment