Variable Face

I thought it would be interesting to make a face that would display a range of emotions principally through the eyebrows and mouth. I also included variability in the size of and distance between the eyes as a kind of variable cuteness metric.

proj-02



var eyeSize = 20;      // determines the size of the eyes
var faceWidth = 100;   // determines the height of the face
var faceHeight = 150;  // determines the width of the face
var eyeWidth = 0.25;   // determines spacing between eyes
var browRaise = 20;    // determines eyebrow height above eyes
var mood = 10;         // determines eyebrow slant as well as mouth curvature
var moodMod = 3;       // determines the intensity of the mouth curvature

function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(180);
    strokeWeight(2 * eyeSize);
    stroke(255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // draws head
    strokeWeight(1);
    stroke(0);
    var eyeLX = width / 2 - faceWidth * eyeWidth - eyeSize / 2;
    var eyeRX = width / 2 + faceWidth * eyeWidth + eyeSize / 2;
    fill(0);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, 0, 3); //left eye
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, 0, 3); //right eye
    fill(255);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, .5, 1); //left eye highlight
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, .5, 1); //right eye highlight
    var browAngle = browRaise + mood;
    line(eyeLX - (eyeSize / 2), height / 2 - browRaise, eyeLX + (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    line(eyeRX + (eyeSize / 2), height / 2 - browRaise, eyeRX - (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    var mouthY = (height / 2) + (faceHeight / 4);
    var mouthShape = mouthY + moodMod * mood;
    curve(50, mouthShape, eyeLX, mouthY, eyeRX, mouthY,  width - 50, mouthShape); // draws mouth
    




}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 50);
    eyeWidth = random(.1, .4);
    browRaise = random(10, 30);
    mood = random(-browRaise, browRaise);
    moodMod = random(1, 4);

}

Leave a Reply