Assignment: 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

Here are some good examples from the past years, you can check the source code by clicking on code down to the right:
here , here , this one, this one too,
this one uses loops which I haven’t covered yet

PART 2: Make it Responsive

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

The template files can be downloaded from here

Your Processing project will have two files.

The map function is crucial for this assignment.

float V = map(volume, 0, 100, 2,100);

In this snippet, V 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 V = map(volume, 0,100, -100,100);

Or invert the scale

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



1. Export it as mac app
2. Zip the project folder with pde and .app
3. Upload the zip on dropbox or similar service
4. Write a blog post with a screenshot of the sketch and a link to the zip


  • If stylized character design is not one of your strengths, look for inspirations in the pictoplasma Flickr pool
  • 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.

If this assignment is too easy for you, you can integrate face detection using this super simple package:
FaceOSC + Processing template
Read the readme file for instructions.

Posted in

Post a comment