project-02-variable-face

sketch

var faceWidth = 0.75;
var eyeColor1 = 100;
var eyeColor2 = 200;
var eyeColor3 = 100;
var eyebrowSlant = 0;
var mouthSlant = 0;

function setup() 
{
  createCanvas(640,480);
}

function draw()
{
  background(220);
  
  //Background of face
  strokeWeight(1);
  fill(255);
  ellipse(width/2, height/2, 300*faceWidth, 300);
  
  //Eye background
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);

  //Eye irises
  strokeWeight(0);
  fill( eyeColor1, eyeColor2, eyeColor3 );
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);

  //Eyebrows
  fill(0);
  triangle((width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)+(80*faceWidth)-(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);
  triangle((width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)-(80*faceWidth)+(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);

  //Mouth
  strokeWeight(3);
  noFill();
  if( mouthSlant == 0 )
  {
    line((width/2)+(80*faceWidth), (height/2)+60, (width/2)-(80*faceWidth), (height/2)+60);
  }
  else if( mouthSlant < 0 )
  {
    var posSlant = mouthSlant*-1;
    arc(width/2, (height/2)+60, 160*faceWidth, posSlant*2, PI, 0 );
  }
  else
  {
    arc(width/2, (height/2)+60, 160*faceWidth, mouthSlant*2, 0, PI ); 
  }
}

function mousePressed() 
{
  eyeColor1 = random(100,255);
  eyeColor2 = random(100,255);
  eyeColor3 = random(100,255);
  faceWidth= random(60,125) / 100;
  eyebrowSlant= random(-15,15);
  mouthSlant= eyebrowSlant * 3 * ((random(0,1)*2)-1);
}

I tried to make the variables interdependent to create a coherent face throughout variations. For example, the size of the eyes and mouth are dependent on the width of the face, and the eyebrows are always the same width as the eyes. The mouth can be upwards or downwards as can the eyebrows allowing for 5 expressions (neutral, smile, evil smile, angry, sad/afraid), however the intensity of the mouth slant will always correspond to the intensity of the eyebrow slant allowing for a coherent intensity of the expression.