Generative faces – A1 Part 2

The face is the window to the soul. We are exquisitely attuned to reading facial expressions, emotions and other information from the face. We could even think about the face as the ‘Graphical User Interface’ to the body.

There is a rich historic context for reading and exploring facial expressions.

Without any effort, we maintain a massively multidimensional model that can recognize minor variations in shape and color. One theory says that color vision evolved in apes to help us empathize.

Chernoff Faces

Structurally, Herman Chernoff came up with the idea that a facial expression could be reduced to 18 variables and that these could be used to visualize data sets. Chernoff Faces are discussed in every information visualization course, and are referenced in many papers. Yet the only serious use of faces in visualization is for calibration, not for data display. Faces are so special that we better know their perceptual properties really well before we can use them, which we don’t.


Some more examples of artworks dealing with faces:

Golan Levin created this software work, Reface, Portrait Sequencer that remixes faces captured from recordings of visitors to the artwork.

This generative facial project was made by artist Mattias Dorfelf uses software to make infinite illustrations of facial possibilities.

And this project, Cheese by Christian Moeller brilliantly explores what is computationally detected as a smile and what is not.

Assignment task description

Assignment Task 2 is to develop your face from Part 1 into a face generator so that when the mouse is clicked, the facial expression changes – use the random function in some way.

Create a grid of 9 different facial expressions taking screenshots from your generator. (put this together in photoshop or equivilent) Post your grid of faces to the blog this week.

If you need some help on this – download an example template here.

And here is another template:

//create variables we will want to change
float faceW; //variable for face width
float faceH; //variable for face height
float eye1X; //variable for eye 1 X position
float eye2X;  //variable for eye 2 Y position
float mouth1X; //variable for eye 1 X position
float mouth2X;  //variable for eye 2 Y position
void setup() {
  size(400, 400);
  //intial values for variables
  eye1X= width/2 - 50; // 50 pixels left of the middle of the screen
  eye2X= width/2 + 50; // 50 pixels right of the middle of the screen
  mouth1X=150; //variable for mouth left X position
  mouth2X=250;  //variable for mouth right Y positio
void draw() {
  background(255, 0, 0); //refresh background each time
  ellipse (width/2, height/2, faceW, faceH);
  ellipse(eye1X, 100, 20, 20);
  ellipse(eye2X, 100, 20, 20);
  curve(100, 0, mouth1X, 250, mouth2X, 250, 300, 0); //see
  //then if the mouse is clicked
  if (mousePressed) {
    //generate new values for our variables
    faceW=random(280, 320); //new random width within the range of 280-320
    faceH=random(280, 320); //new random height
    eye1X= width/2 - random(20, 80); // locate eye1 at a random value between 40-60 pixels left of the middle of the screen
    eye2X= width/2 + random(20, 80); // locate eye1 at a random value between 40-60 pixels right of the middle of the screen
    mouth1X=random(100, 180); //variable for eye 1 X position
    mouth2X=random(230, 300);  //variable for eye 2 Y position
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14