lee chu – project 02 – variable face

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 02

var eyeSize = 20;
var eyeColor = 24;
var mouthWidth = 20;
var faceR = 60;
var faceH = 120;
var hairH = 20;
var R = 229;
var browL = 12;
var browT = 0;

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

function draw() {
    background(color(R, 208, 227));
    fill(color(231, 229, 229));

    // head
    strokeWeight(0.7);
    beginShape();
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - faceR, height/2);
    curveVertex(width/2 - 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 - 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.3 * faceR, height/2 - 0.5 * faceH);
    curveVertex(width/2 + 0.8 * faceR, height/2 - 0.3 * faceH);
    curveVertex(width/2 + faceR, height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    endShape();

    // cheeks
    beginShape();
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 + 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 + faceR, 1.2 * height/2);
    curveVertex(width/2 + 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 + 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.35 * faceR, 1.28 * height/2);
    curveVertex(width/2 - 0.7 * faceR, 1.25 * height/2);
    curveVertex(width/2 - faceR, 1.2 * height/2);
    curveVertex(width/2 - 1.1 * faceR, 1.14 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    curveVertex(width/2 - 1.05 * faceR, 1.05 * height/2);
    endShape();

    // eyes
    var eyeRX = width/2 + faceR * 0.5;
    var eyeLX = width/2 - faceR * 0.5;
    var eyeRH = height/2 + 0.05 * faceH;
    var eyeLH = height/2;
    strokeWeight(0);
    fill('black');
    ellipse(eyeRX, eyeRH, eyeSize, 0.9 * eyeSize);
    ellipse(eyeLX, eyeLH, eyeSize, 0.9 * eyeSize);
    fill(color(184, 24, eyeColor));
    ellipse(eyeRX, eyeRH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    ellipse(eyeLX, eyeLH + 0.1 * eyeSize, 0.8 * eyeSize, 0.7 * eyeSize);
    fill('white');
    ellipse(eyeRX + 0.25 * eyeSize, eyeRH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);
    ellipse(eyeLX + 0.25 * eyeSize, eyeLH - 0.2 * eyeSize, 0.3 * eyeSize, 0.25 * eyeSize);

    // eyebrows
    strokeWeight(0.7);
    beginShape();
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX - 0.5 * browL, eyeRH - 0.75 * eyeSize - browT);
    curveVertex(eyeRX, eyeRH - 0.85 * eyeSize);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    curveVertex(eyeRX + 0.5 * browL, eyeRH - 0.75 * eyeSize + browT);
    endShape();
    beginShape();
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX - 0.5 * browL, eyeLH - 0.75 * eyeSize + browT);
    curveVertex(eyeLX, eyeLH - 0.85 * eyeSize);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    curveVertex(eyeLX + 0.5 * browL, eyeLH - 0.75 * eyeSize - browT);
    endShape();

    // mouth
    strokeWeight(0);
    fill('gray');
    beginShape();
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 - 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.3 * mouthWidth, height/2 + 0.15 * faceH);
    curveVertex(width/2 + 0.5 * mouthWidth, height/2 + 0.2 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    curveVertex(width/2 + 0.4 * mouthWidth, height/2 + 0.22 * faceH);
    endShape();

    // hair
    strokeWeight(0.5);
    noFill();
    beginShape();
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2, height/2 - 0.45 * faceH);
    curveVertex(width/2 - 0.1 * faceH, height/2 - 0.5 * faceH - 0.85 * hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    curveVertex(width/2 - 0.2 * faceH, height/2 - 0.5 * faceH - hairH);
    endShape();

}

function mousePressed() {
    R = random(180, 255);
    faceR = random(30, 85);
    faceH = random(80, 170);
    eyeSize = random(8, 30);
    eyeColor = random(0, 255);
    mouthWidth = random(10, 40);
    hairH = random(10, 90);
    browT = random(-3, 3);
    browL = random(5, 14);
}

I experimented with curveVertex() to create a blob-like face with variable pupils, mouth, eyebrows, and hair.

Leave a Reply