Nawon Choi— Project-02 Variable Face

nawonc-variable-face

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project-02 Variable Faces

var sushiX = 233;
var sushiType = "egg";
var browHeight = 147;
var browAngle = 0;
var eyeballSize = 33;
var eyeSize = 1.5;


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

function draw() {
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 640, 250); 

    // hair
    noStroke();
    fill("#6A6159");
    ellipse(304, 250, 394, 500);

    noStroke();
    fill("#6A6159");
    ellipse(382, 249, 302, 465);

    // head
    noStroke();
    fill("#F2E3C2");
    ellipse(325, 236, 356, 423);

    // fringe
    noStroke();
    fill("#6A6159");
    quad(124, 182, 270, 125, 373, 30, 198, 61);

    noStroke();
    fill("#6A6159");
    triangle(223, 57, 294, 16, 373, 30);

    // eyebrows
    strokeWeight(10);
    stroke("#8F847B");
    noFill();
    beginShape();
    curveVertex(183, browHeight + browAngle);
    curveVertex(183, browHeight + browAngle);
    curveVertex(213, browHeight - browAngle);
    curveVertex(278, browHeight + browAngle);
    curveVertex(278, browHeight + browAngle);
    endShape();

    strokeWeight(10);
    stroke("#8F847B");
    noFill();
    beginShape();
    curveVertex(365, browHeight + browAngle);
    curveVertex(365, browHeight + browAngle);
    curveVertex(430, browHeight - browAngle);
    curveVertex(460, browHeight + browAngle / 2);
    curveVertex(460, browHeight + browAngle / 2);
    endShape();

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(224, 193, 57 * eyeSize, 46 * eyeSize);

    noStroke();
    fill("#ffffff");
    ellipse(417, 193, 57 * eyeSize, 46 * eyeSize);

    // eyeballs
    var leftEye = 224;
    var rightEye = 417;
    var eyeHeight = 200;
    var sushiCenter = sushiX + 88;

    if (sushiCenter < 201) {
        leftEye = 201,
        rightEye = 394;
    } else if (sushiCenter >= 201 & sushiCenter <= 225) {
        leftEye = sushiCenter,
        rightEye = 394;
    } else if (sushiCenter > 225 & sushiCenter < 394) {
        leftEye = 240,
        rightEye = 394;
    } else if (sushiCenter >= 394 & sushiCenter <= 418) {
        leftEye = 240,
        rightEye = sushiCenter;
    } else {
        leftEye = 240,
        rightEye = 418;
    }

    noStroke();
    fill("#6A6159");
    ellipse(leftEye, eyeHeight, eyeballSize, eyeballSize);

    noStroke();
    fill("#6A6159");
    ellipse(rightEye, eyeHeight, eyeballSize, eyeballSize);

    noStroke();
    fill("#FAFAFA");
    ellipse(leftEye-4, eyeHeight-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(rightEye-4, eyeHeight-4, 12, 12);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 640, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 640, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 640, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(sushiX, 250, 175, 80, 29);

    if (sushiType == 'egg'){
        // egg
        noStroke();
        fill("#F2BD39");
        rect(sushiX-20, 224, 214, 53, 7);

        noStroke();
        fill("#F8D683");
        rect(sushiX-20, 224, 214, 20, 7);

        // seaweed
        noStroke();
        fill("#424944");
        rect(sushiX+72, 220, 30, 24);

        noStroke();
        fill("#27312B");
        rect(sushiX+72, 244, 30, 33);

        noStroke();
        fill("#151916");
        rect(sushiX+72, 277, 30, 53);
    } else if(sushiType == 'salmon'){
        // salmon
        noStroke();
        fill("#EC9326");
        rect(sushiX-20, 224, 214, 53, 7);

        var space = 32;
        var sushiY = sushiX + 19;

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX, 229, sushiY, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space, 229, sushiY + space, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 2, 229, sushiY + space * 2, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 3, 229, sushiY + space * 3, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 4, 229, sushiY + space * 4, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 5, 229, sushiY + space * 5, 272);
    } else if(sushiType == 'tuna') {
        // tuna
        noStroke();
        fill("#F2464A");
        rect(sushiX - 20, 224, 214, 53, 7);

        var space = 30;
        var sushiY = sushiX + 17;

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + 35 - space, 229, sushiY - space, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + 35, 229, sushiY, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space + 35, 229, sushiY + space, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 2 + 35, 229, sushiY + space * 2, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 3 + 35, 229, sushiY + space * 3, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 4 + 35, 229, sushiY + space * 4, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 5 + 35, 229, sushiY + space * 5, 272);
    }

}

function mousePressed() {
    // variables are reassigned when user clicks
    let sushis = ['egg', 'salmon', 'tuna']
    floats = [1.0, 1.1, 1.2, 1.3, 1.4, 1.5];
    colors = ['#6A6159', '#c795b5', '#1d3f75', '#c9b75b', '#cc7a4e', '#6d1873'];
    sushiX = random(38, 430);
    sushiType = random(sushis);
    eyeballSize = random (23, 43);
    eyeSize = random (floats);
    browHeight = random(137, 160);
    browAngle = random(0, 10);


}

I made three different kinds of sushi and made them correlate to different string variables, “egg”, “salmon”, and “tuna”. I also tried to make the position of the eyes correspond to the location of the sushi so that the eyes would follow the sushi. It was fun playing around with different variables to see what types of expressions could be made just by switching around different values.

I showed this to a friend and they mentioned that it kind of looks like sushi going along a conveyor belt!