Generative Faces

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.

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.

For an amazing archive of more face research see this page by Kyle McDonald.

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 GIFF of your face being clicked (using licecap) (or if you prefer, create a grid of 9 different facial expressions taking screenshots. To make the grid you will need to put this together in photoshop or equivalent) Post to the blog this week.

And here is another template, remember if you use this. You must change it substantially to make it your own.

//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
float d = 350;

void setup() {
  size(400, 400);
  //intial values for variables
  faceW=300;
  faceH=300;

  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

  //face
  ellipse (width/2, height/2, faceW, faceH);

  //eyes
  ellipse(eye1X, 150, 20, 20);
  ellipse(eye2X, 150, 20, 20);

  //mouth
  curve(100, 0+d, mouth1X, 250, mouth2X, 250, 300, 0+d); //see https://processing.org/reference/curve_.html

  //then if the mouse is clicked

}

void mouseClicked(){
    //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

  d= random(0,400);

}