Atraylor – Project 02 – Variable Faces

When making this project, I was thinking of all the proportional measurements I use to make human faces, especially the relationship between the eyes and the rest of the face. Starting out, I noticed that my random faces were just scaling up and down because the ratios were all established on one variable: the eye size. The end result is more interesting and resembles some of the steps I would make to draw a face.

sketch

//Allison Traylor, atraylor,
//section B, Project 02


var eyeSize = 30; //eye size
var eyeSpaceL = 0.25; //eye space left
var eyeSpaceR = 0.25; //eye space right
var faceWidth = (eyeSize * 5); //face oval width (relative to eye size)
var faceHeight = 210; // face oval height
var craniumWidth = 150;
var craniumHeight = 150;
var mouthWidth = 25; // corner locations for mouth

var colorL = (200,200,200,200); // color of left eye
var colorR = (200,200,200,200); // color of right eye
var mColor = (200,200,200,200); // color of mouth


function setup() {
    createCanvas(480, 640);
    background(220);

}


function draw() {

    background(222);
    var noiseVal = random(0.001, .6); // flickering lines
    //chin height is proportional to faceHeight, tring to make it right below the mouth
    var chinHeight =  height/2 + faceHeight/4 + faceHeight/8 + faceHeight/16;

    // Cranium
    noFill();
    ellipse(width/2, height/2 - eyeSize, craniumWidth, craniumHeight);

    //bounding box
    push();
    noFill();
    stroke(noiseVal * 255); // lines flicker
    rect(width/2 - craniumWidth/2, height/2 - eyeSize - craniumHeight/2, craniumWidth, craniumHeight);
    pop();

    //face ellipse
    noFill();
    ellipse(width/2, height/2, faceWidth, faceHeight);


    // nose line proportional to eyes
    line(width/2 - eyeSize/2, height/2 + faceHeight/4,
         width/2 + eyeSize/2, height/2 + faceHeight/4);

    //eyes
    fill(colorL);
    ellipse((width/2) - faceWidth*eyeSpaceL, height/2, eyeSize, eyeSize); // Left eye (to viewer)
    fill(colorR);
    ellipse((width/2) + faceWidth*eyeSpaceR, height/2, eyeSize, eyeSize); // right eye

    //eye line
    line(width/2 - faceWidth/2, height/2, width/2 + faceWidth/2, height/2);


    // mouth
    fill(mColor);
    //I'm trying to isolate the mouth in a certain area between nose and chin
    triangle((width/2) - mouthWidth, height/2 + faceHeight/4 + faceHeight/8,
        width/2, height/2 + faceHeight/4 + faceHeight/12,
        (width/2) + mouthWidth,  height/2 + faceHeight/4 + faceHeight/8);

    //chin
    push();
    noFill();
    stroke(noiseVal * 255);
    ellipse(width/2, chinHeight, mouthWidth, mouthWidth);
    pop();

    // plumbline
    line(width/2, height/4, width/2, (height - height/4));


}

function mousePressed(){

    // generating random values
    eyeSize = random(20, 50);
    eyeSpaceR = random(0.20, 0.30);
    eyeSpaceL = random(0.20, 0.30);
    faceHeight = random(190, 250);
    craniumWidth = random(150, 200);
    craniumHeight = random(150, 200);
    mouthWidth = random(10, 30);

    var from = color(200,200,200,200); //interpolate from this color
    var to = color(0,0,0,200); // to this color

    // random numbers to be used in lerpColor
    var lerpNumber = random(0,1);
    var lerpNumber2 = random(0,1);
    var lerpNumber3 = random(0,1);

    mColor = lerpColor(from, to, lerpNumber); // random shade for mouth

    colorR = lerpColor(from, to, lerpNumber2); //random shade for right eye
    colorL = lerpColor(from, to, lerpNumber3); // random shade for left eye
}