Kevin Thies – Variable Face

sketch

//Kevin Thies
//Section C
//kthies@andrew.cmu.edu
//Project-02

// Core Variables
var headHeight = 200; // head height and width
var headWidth = 200;
var noseHeight = headHeight * 2.5; // relates proportion of head to  nose
var noseAngle = -4;

var skinR = 221; // color values for skin and background
var skinG = 203;
var skinB = 161;

var backR = 25; // background color offset from skin color values
var backG = 25; // additionally used to offset eye color
var backB = 25; // so the colors all harmonize

var eyeOffset = 50; // setback from head width
var eyeWidth = headWidth/2 - eyeOffset; // eye position
var eyeHeight = eyeWidth * headHeight / headWidth; // use head proportions for eyes
var eyeTop = 3;
var eyeBottom = 3.5;
var pupilRatio = .8; // ratio of eye white to black
var irisRatio = 1.4; // ratio of eye black to color


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

function draw() {

    // Background that
    background(skinR + backR, skinG + backG, skinB + backB);

    // Head Shape
        // Nose, sometimes it looks more like a nose and that's ok
        noStroke();
        fill(skinR, skinG, skinB);
        arc(width/2, height/3, headWidth, noseHeight, noseAngle, 0, CHORD);

        // Hide the top half of nose generated
        fill(skinR + backR, skinG + backG, skinB + backB);
        rect(0,0, width, height/3);

        // Head's main ellipse
        fill(skinR, skinG, skinB);
        ellipse(width/2, height/3, headWidth, headHeight);

    // Nose

    // Eyes
        // Pupil
        fill(0);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth,
            eyeHeight, eyeTop, eyeBottom, PIE);
        // Iris
        fill(skinR - backR, skinG - backG, skinB - backB);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio * irisRatio,
            eyeHeight * pupilRatio * irisRatio, eyeTop, eyeBottom, PIE);
        // White
        fill(255);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio,
            eyeHeight * pupilRatio, eyeTop, eyeBottom, PIE);


}

function mousePressed() {

    //Reshuffle the head dimensions
    headWidth = random(120, 200);
    headHeight = random(100, 160);
    noseHeight = headHeight * random(2, 3);
    noseAngle = -random(3.66, 4); //radian angle of  arc

    //Change eye color and Shape
    eyeOffset = random(45, 60);
    eyeTop = random(2.61, 3.14); // 5/6 Pi to Pi
    eyeBottom = random(3.14, 3.66); //Pi to 7/6 pi
    pupilRatio = random(.75, .5);
    irisRatio = random(1.2, 1.3);

    // Constrain face color to less saturated, darker values
    skinR = random(140, 225);
    skinG = random(143, 225);
    skinB = random(140, 184);

    // Reshuffle background color offset
    backR = random(-50, 25);
    backG = random(-50, 25);
    backB = random(-50, 25);
}

There was a lot of math involved in this one. If I could go back in time, I think bezier curves would’ve been a better fit than arcs simply based on the parameters they use. At the same time, since I used arcs, the end product morphed into what it is now instead of more ‘realistic’ shapes.