Author: Andrew

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var eyeInside = 10;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 5;
var earHeight = 20;
var noseBridge = 15;
var hairType = 3;
var colorR = 180;
var colorG = 180;
var colorB = 180;
var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;
var mouthWidth = 20;
var mouthHeight = 5;
var mouthPosition = 4;
var eyeBrow = 1;

function setup() {
    createCanvas(300, 300);
}
function draw() {
    background(colorR, colorG, colorB);
      
    noStroke();
    fill(255);
    switch(hairType) {
        case 1:
            fill(colorR2, colorG2, colorB2);
            ellipse(width/2, height/2+faceHeight/6, faceWidth+30, faceHeight+80);
            break;
        case 2:
            fill(color(colorR2, colorG2, colorB2));
            rectMode(CENTER);
            rect(150, 150-faceHeight/2.5, faceWidth-20, faceHeight/6,80);
            rect(150, 150-faceHeight/2.5, faceWidth-50, faceHeight/2,90);
            break;
        default:
            strokeWeight(10);
            stroke(color(colorR2, colorG2, colorB2));
            arc(150, 150, faceWidth, faceHeight, PI, 0);
    }
    fill(255);
    strokeWeight(1);
    noStroke();
    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var earLX = width / 2 - faceWidth / 2;
    var earRX = width / 2 + faceWidth / 2;
    var mouthY = height / 2 + faceWidth / mouthPosition;
    noStroke();
    //ear
    ellipse(earLX, height / 2, earWidth, earHeight);
    ellipse(earRX, height / 2, earWidth, earHeight);
    fill(colorR, colorG, colorB);
    //eye
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(255);
    ellipse(eyeLX, height / 2, eyeInside, eyeInside);
    ellipse(eyeRX, height / 2, eyeInside, eyeInside);
    fill(colorR, colorG, colorB);
    //nose
    stroke(color(colorR, colorG, colorB));
    line(150,160,150,150+noseBridge);
    //mouth
    ellipse(width / 2, mouthY, mouthWidth, mouthHeight);
    //neck
    rectMode(CENTER);
    fill(255);
    noStroke();
    rect(150, 150+faceHeight/2,25,30);
    //eyebrows
    switch(eyeBrow) {
        case 1:
            noFill();
            stroke(color(colorR, colorG, colorB));
            arc(eyeLX, eyeRX-40, 30, 30, PI, 0);
            arc(eyeRX, eyeRX-40, 30, 30, PI, 0);
            break;
        case 2:
            noFill();
            stroke(color(colorR, colorG, colorB));
            strokeWeight(4);
            line(eyeLX-10, eyeRX-50, eyeLX+10,eyeRX-50);
            line(eyeRX-10, eyeRX-50, eyeRX+10,eyeRX-50);
            break;
        default:
            noFill();
            stroke(color(colorR, colorG, colorB));
            arc(eyeLX-10, eyeRX-faceHeight/2, 40, 20, 0, HALF_PI);
            arc(eyeRX+10, eyeRX-faceHeight/2, 40, 20, HALF_PI, PI);
    }
    if (hairType == 1) {
        noStroke();
        fill(colorR2, colorG2, colorB2);
        arc(150, 150-faceHeight/4, faceWidth/1.1, faceHeight/1.9, PI, 0);
    }
}
 
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.
    colorRandomizer();
    colorRandomizer2();
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    earWidth = random(5, 15);
    earHeight = random(15, 30);
    hairType = floor(random(1, 4));
    mouthPosition = random(2, 5);
    mouthWidth = random(10, 30);
    mouthHeight = random(1, 5);
    noseBridge = random(5,20);
    eyeInside = random(5,10);
    eyeBrow = floor(random(1,4));
}
function colorRandomizer() {
    colorR = random(0, 250);
    colorG = random(0, 250);
    colorB = random(0, 250);
}
function colorRandomizer2() {
    colorR2 = random(0, 250);
    colorG2 = random(0, 250);
    colorB2 = random(0, 250);
}

I tried changing the eyebrows and hairstyles in this project as I think eyebrows are the easiest way to express different emotions, and hairstyles can make the individual look drastically different. Other than that I changed the variable and position of the mouth, nose, eyes, and ears to represent differences.