Project 2 – Variable Faces

Click on the hamster and see its mood evolve as it eats and chews!

sketch
/*
 * Michelle Kim
 * Section B
 */

var faceWidth = 170;
var faceHeight = 150;
var leftCheekWidth = 85;
var leftCheekHeight = 70;
var rightCheekWidth = 85;
var rightCheekHeight = 70;
var eyeWidth = 15;
var eyeHeight = 20;
var noseWidth = 40;
var noseHeight = 25;
var leftEarWidth = 40;
var leftEarHeight = 50;
var rightEarWidth = 40;
var rightEarHeight = 50;
var bodyWidth = 240;
var bodyHeight = 200;
var footWidth = 50;
var footHeight = 30;
var leftMouthStop = 1.57;
var rightMouthStart = 1.57;

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    var canvasCenter = width / 2;
    var footX = bodyWidth * 0.3;
    var footY = bodyHeight * 0.45;
    var bodyCenterY = height * 0.65;
    var faceY = bodyCenterY - (bodyHeight * 0.8);
    var earX = faceWidth * 0.25;
    var earY = faceY - (faceHeight * 0.45);
    var cheekY = faceY + (faceHeight * 0.25);
    var eyeX = faceWidth * 0.2;
    var eyeY = faceHeight * 0.1;
    var blushX = leftCheekWidth * 0.45;
    var handX = bodyWidth * 0.1;
    var mouthX = noseWidth * 0.25;
    var mouthY = faceY + (noseHeight * 0.8);
    var noseY = faceY + eyeY - (noseHeight * 0.2);
    var leftBlushX = leftCheekWidth * 0.3;
    var leftBlushY = leftCheekHeight * 0.2;
    var rightBlushX = rightCheekWidth * 0.3;
    var rightBlushY = rightCheekHeight * 0.2;

    background(204, 238, 245);
    noStroke();
    fill(218, 205, 141);
    //left foot
    ellipse(canvasCenter - footX, bodyCenterY + footY, footWidth, footHeight);
    //right foot
    ellipse(canvasCenter + footX, bodyCenterY + footY, footWidth, footHeight);

    fill(246, 231, 153);
    //yellow body
    ellipse(canvasCenter, bodyCenterY, bodyWidth, bodyHeight);
    //left yellow ear
    ellipse(canvasCenter - earX, earY, leftEarWidth, leftEarHeight);
    //right yellow ear
    ellipse(canvasCenter + earX, earY, rightEarWidth, rightEarHeight);

    fill(161, 154, 118);
    //left brown ear
    ellipse(canvasCenter - earX, earY, leftEarWidth / 2, leftEarHeight / 2);
    //right brown ear
    ellipse(canvasCenter + earX, earY, rightEarWidth / 2, rightEarHeight / 2);

    fill(246, 231, 153);
    //yellow face
    ellipse(canvasCenter, faceY, faceWidth, faceHeight);

    fill(242, 234, 183);
    //white body
    ellipse(canvasCenter, bodyCenterY, bodyWidth * 0.7, bodyHeight);

    fill(245, 239, 213);
    //left cheek
    ellipse(canvasCenter - earX, cheekY, leftCheekWidth, leftCheekHeight);
    //right cheek
    ellipse(canvasCenter + earX, cheekY, rightCheekWidth, leftCheekHeight);
    //snout
    ellipse(canvasCenter, cheekY, faceWidth * 0.35, faceHeight * 0.45);

    fill(81, 80, 72);
    //left eye
    ellipse(canvasCenter - eyeX, faceY - eyeY, eyeWidth, eyeHeight);
    //right eye
    ellipse(canvasCenter + eyeX, faceY - eyeY, eyeWidth, eyeHeight);

    noFill();
    stroke(100);
    strokeWeight(2);
    //left mouth
    arc(canvasCenter - mouthX, mouthY, 20, 40, 0, leftMouthStop);
    //right mouth
    arc(canvasCenter + mouthX, mouthY, 20, 40, rightMouthStart, 3.14);

    fill(218, 205, 141);
    stroke(210, 198, 138);
    //left hand
    arc(canvasCenter - handX, bodyCenterY, 20, 60, 0, 3.49);
    //right hand
    arc(canvasCenter + handX, bodyCenterY, 20, 60, 5.93, 3.14);

    noStroke();
    fill(141, 136, 102);
    //brown nose
    ellipse(canvasCenter, faceY + eyeY, noseWidth, noseHeight);

    fill(225, 223, 208);
    //white nose
    ellipse(canvasCenter - mouthX, noseY, mouthX, noseHeight * 0.25);

    fill(235, 192, 216);
    //left blush
    ellipse(canvasCenter - blushX, faceY + eyeY, leftBlushX, leftBlushY);
    //right blush
    ellipse(canvasCenter + blushX, faceY + eyeY, rightBlushX, rightBlushY);
}

function mousePressed() {
    leftCheekWidth = random (85, 100);
    leftCheekHeight = random (60, 110);
    rightCheekWidth = random (85, 100);
    rightCheekHeight = random (60, 110);
    eyeWidth = random (10, 20);
    eyeHeight = random (15, 25);
    leftEarHeight = random (25, 50);
    rightEarHeight = random (25, 50);
    bodyWidth = random (230, 280);
    leftMouthStop = random (1.5, 2);
    rightMouthStart = random (1, 1.5);
}

Leave a Reply