Project 2: Variable Face

variable face cb
var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var centerX = width / 2
    var centerY = height / 2
    background(backgroundR, backgroundG, backgroundB);

    //body
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY + 120, bodyWidth, 50);
    rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);

    //ears
    var earLX = centerX - 55
    var earRX = centerX + 55
    var earLH = centerY - earHeight
    var earRH = centerY - earHeight
    stroke(95, 130, 255);
    strokeWeight(10);
    fill(255, 130, 130);
    triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
    triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);

    //dress
    noStroke();
    fill(dressR, dressG, dressB);
    triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);

    //face
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY, faceWidth,  faceHeight);

    //hair
    //left
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 35, centerY - 90);
    curveVertex(centerX - 50, centerY - 50);
    curveVertex(centerX - 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //center
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 15, centerY - 70);
    curveVertex(centerX, centerY - 35);
    curveVertex(centerX + 15, centerY - 70);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //right
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX + 35, centerY - 90);
    curveVertex(centerX + 50, centerY - 50);
    curveVertex(centerX + 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();

    //eyes
    var eyeLX = centerX - faceWidth * 0.25;
    var eyeRX = centerX + faceWidth * 0.25;
    noStroke();
    fill(255);
    ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
    ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
    //eye black
    noStroke();
    fill(eyeColor);
    ellipse(eyeLX - 5, centerY + 5, 48, 60);
    ellipse(eyeRX - 5, centerY + 5, 48, 60);
    //eye highlight
    noStroke();
    fill(255);
    triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
    triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);

    //blush
    noStroke();
    fill(210, 150, 170);
    ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
    ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);

   
    //mouth
    if (mouseY <= (centerY)) {
        //smile
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 32, centerY + 60);
        curveVertex(centerX + 32, centerY + 60);
        endShape();
    } else if (mouseY > centerY) {
        //frown
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 25, centerY + 70);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(280, 330);
    faceHeight = random(210, 300);
    eyeWidth = random(50, 60);
    eyeHeight = random(65, 75);
    eyeColor = random(0, 100);
    backgroundR = random(170, 255);
    backgroundG = random(170, 170);
    backgroundB = random(170, 200);
    blushWidth = random(25, 40);
    blushHeight = random(5, 25);
    bodyWidth = random(110, 150);
    dressR = random(130, 255);
    dressG = random(80, 170);
    dressB = random(110, 150);
    earHeight = random(160, 200);
}

My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!

inspiration & sketch

Leave a Reply