Yoo Jin Shin-Project-03-Dynamic-Drawing

Project-03

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-03

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 10;
var pupilLeftX2 = 128;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceHeight = 300;
var faceR = 244;
var faceG = 240;
var faceB = 132;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    // gradient background that changes with mouse position
    var backgroundR = mouseX * 0.39;
    var backgroundG = mouseY * 0.53;
    var backgroundB = 255;
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face width that enlarges from 10 to width as mouseX moves right
    fill(faceR, faceG, faceB);
    ellipse(180, 180, constrain(mouseX, 10, width), faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupil that follow mouse within left eye boundary
    fill(255);
    ellipse(constrain(mouseX, 125, 153), constrain(mouseY, 150, 168), pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrow
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eye
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupil that follow mouse within right eye boundary
    fill(255);
    ellipse(constrain(mouseX, 207, 230), constrain(mouseY, 150, 168), pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrow
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, TWO_PI, PI);

    // "SNOW" text that enlarges from 20 to mouseX as mouse moves right
    fill(255);
    noStroke();
    textSize(20 + mouseX / 4);
    textFont('Helvetica');
    text('SNOW', constrain(mouseX, 0, width), 390);

    // background snow that follows mouse position
    push();
    translate(mouseX + 1, mouseY + 1);
    rotate(radians(20));
    fill(255);
    noStroke(255);
    ellipse(mouseX + 5, mouseY + 5, 8, 8);
    ellipse(mouseX + 10, mouseY + 50, 3, 3);
    ellipse(mouseX + 80, mouseY + 50, 10, 10);
    ellipse(mouseX + 50, mouseY + 200, 20, 20);
    ellipse(mouseX + 20, mouseY + 100, 8, 8);
    ellipse(mouseX + 100, mouseY + 90, 14, 14);
    ellipse(mouseX + 52, mouseY + 100, 8, 8);
    ellipse(mouseX + 102, mouseY + 200, 3, 3);
    ellipse(mouseX + 88, mouseY + 300, 10, 10);
    ellipse(mouseX + 502, mouseY + 400, 20, 20);
    ellipse(mouseX + 202, mouseY + 430, 8, 8);
    ellipse(mouseX + 102, mouseY + 240, 14, 14);
    ellipse(mouseX - 5, mouseY - 5, 8, 8);
    ellipse(mouseX - 10, mouseY - 50, 3, 3);
    ellipse(mouseX - 80, mouseY - 50, 10, 10);
    ellipse(mouseX - 50, mouseY - 200, 20, 20);
    ellipse(mouseX - 20, mouseY - 100, 8, 8);
    ellipse(mouseX - 100, mouseY - 90, 14, 14);
    pop();
}

I modified my variable face to make it more interactive by adding features like face shape, color, text, and snow that change as the mouse position changes. I think it’s interesting how depending on the face width, the face can range from looking like a fish to a pancake.