aerubin-Project-02-Variable-Face-Section-C

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-02

var eye = 10;
var pupil = 15;
var eyebrow = 1;
var eyelines = 0;
var n = 10; //n for nose
var ear = 1;
var lip = 0;
var ll = 1; //ll for lip length
var jaw = 1;
var chin = 10;
var skull = 1;
var eyebrowcolor = 1;
var lipcolor = 0;

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

function draw() {
    background(254, 247, 244);

    //Jaw Line
    noFill();
    stroke(1);
    beginShape();
    curveVertex(600*jaw, 400*jaw);
    curveVertex(500, 365);
    curveVertex(310, 380);
    curveVertex(300, 300);
    curveVertex(16*chin, 27*chin);
    endShape();

    //Lower Lip
    fill(222+lipcolor, 157+lipcolor, 160+lipcolor);
    beginShape();
    curveVertex(70, 100);
    curveVertex(350, 260);
    curveVertex(300, 300);
    curveVertex(300*ll, 280-lip);
    curveVertex(360, 270);
    endShape();

    //Upper Lip
    beginShape();
    curveVertex(180, 230);
    curveVertex(353, 270);
    curveVertex(300, 260);
    curveVertex(300*ll, 280-lip);
    curveVertex(350, 260);
    curveVertex(110, 140);
    endShape();
    
    fill(254, 247, 244);
    noStroke();
    triangle(350, 252, 329, 264, 360, 271);

    //Cupids Bow
    stroke(1);
    line(300, 260, 30.4*n, 24.0*n);

    //nose
    noFill();
    arc(30.8*n, 22.4*n, 30, 30, 100.3, 96);
    arc(29.1*n, 23.0*n, 70, 20, 120, 91);
    arc(26.9*n, 22.0*n, 40, 34, 90, 79.2);
    arc(25.2*n, 2.6*n, 7.0*n, 36.5*n, 102.05, 95.8);
    line(26.1*n, 20.2*n, 301, 148);

    //nose bridge
    arc(299, -34, 70, 365, 102.01, 95.8);
    
    //Top of Head
    arc(458, 151, 290, 300*skull, 3.29, 4);
    arc(454, 145, 300, 270*skull, 4, 6.5);

    //Back of Neck
    arc(782, 300, 400, 600, 90, 79.2);

    //jaw curve
    arc(490, 337.5, 80, 55, 100.33, 95.7);

    //front of neck
    arc(358, 595, 200, 430, 99, 97);

    //eye
    arc(35.5*eye, 14.4*eye, 45, 45, 90.5, 79.2);

    line(33.6*eye, 13.0*eye, 38.0*eye, (14.2*eye)+eyelines);
    line(33.7*eye, 15.6*eye, 38.0*eye, (14.2*eye)+eyelines);

    //pupil
    fill(100+pupil, 126+pupil, 35+pupil);
    ellipse(33.8*eye, 14.4*eye, 10, 18);
    fill(0);
    ellipse(33.4*eye, 14.4*eye, 5, 10);

    //ear
    noFill();
    arc(480*ear, 188*ear, 80, 95, 98.6, 96);
    arc(470*ear, 188*ear, 80, 75, 99, 94.3);

    //eyebrow
    fill(122/eyebrowcolor, 55/eyebrowcolor, 22/eyebrowcolor);
    noStroke();
    rect(335*eyebrow, 110*eyebrow, 30, 10);
    triangle(365*eyebrow, 110*eyebrow, 365*eyebrow, 120*eyebrow, 389*eyebrow, 125*eyebrow);
}

function mousePressed() {
    pupil = random(0, 100);
    eyebrow = random(.97, 1.03);
    eye = random(9.7, 10.5);
    eyelines = random(-4, 10);
    n = random(9.4, 10.6);
    ear = random(.94, 1.06);
    lip = random(-8, 9);
    ll = random(.97, 1.02);
    jaw = random(.84, 1.1);
    chin = random(6, 14);
    skull = random(.9, 1.06);
    eyebrowcolor = random(.5, 1.4);
    lipcolor = random(-40, 70);
}

Since I drew a face shown in the frontal view last week, I decided to try to draw the profile view for this assignment. My work began on a piece of paper to draw out the outline of the face (shown below). Then I brainstormed the different ways of which I could make the complex outline of the human profile utilizing code. I came to the conclusion that “curveVertex” would be useful in forming the jawline and lips, and I could use a combination of arcs and lines for the majority of the remainder.

I was inspired by the vast variations of faces we see everyday and I tried to emulate the uniqueness of each individual’s profile by changing features such as placement of the ear, placement of the eye, the strength of the jaw line, and many more. In order to emphasize the effect placement of facial features has on facial identification, hair was not necessary as it covers up the natural shape of the skull which contains a multitude of variations in itself. All in all, I am very satisfied with the product and how dramatically the face changes when clicked.