Siwei Xie-Project-02-Variable Face

variable face

//Siwei Xie
//Section 1-B
//sxie1@andrew.cmu.edu
//Project-02-variable face

var mouthHeight = 60;
var eyeHeight = 40;
var hatAdjustor = 2.5;
var hatColor = (0,0,196);
var eyebrowHeight = 200;
var pupilSize = 16;


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

function draw() {

    //re-draw background to avoid "previous hats" when hat moves
    background(220);

    //hair
    fill(0);
    rect(115,120,270,300);

    //clothes
    fill(122,35,76);
    noStroke();
    quad(150, 391, 345, 390, 450, 640,100, 640);

    //face
    fill(232,196,131);
    noStroke();
    ellipse(250,250,250,300);

    //left eye
    fill(3,3,3);
    ellipse(200,250,40,eyeHeight);

    //right eye
    fill(3,3,3);
    ellipse(300,250,40,eyeHeight);

    //nose
    fill(179,149,85);
    triangle(250,260,240,300,260,300);

    //mouth
    fill(208,68,61);
    ellipse(250,345,35,mouthHeight);

    // left pupil
    fill(255)
    noStroke();
    square(195, 245, pupilSize);

    // right pupil
    fill(255)
    noStroke();
    square(295, 245, pupilSize);

    // right earring
    fill(128,194,233);
    arc(370, 300, 60, 60, 15, HALF_PI);

    // left earring
    fill(128,194,233);
    arc(120, 300, 60, 60, 15, HALF_PI);

    //hat
    var hatPosition = width / 2 + hatAdjustor;
    fill(hatColor,0,196);
    ellipse(hatPosition,130,290,125);

    // left eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(5);
    point(215, 220);
    point(195, eyebrowHeight);
    point(170, 210);
    point(160, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(215, 220);
    curveVertex(215, 220);
    curveVertex(195, eyebrowHeight);
    curveVertex(170, 210);
    curveVertex(160, 220);
    curveVertex(160, 220);
    endShape();

    //right eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(0);
    point(350, 220);
    point(340, 210);
    point(310, eyebrowHeight);
    point(290, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(350, 220);
    curveVertex(350, 220);
    curveVertex(340, 210);
    curveVertex(310, eyebrowHeight);
    curveVertex(290, 220);
    curveVertex(290, 220);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'mouthHeight' gets a random value between 15 and 55.
    mouthHeight = random(15, 60);
    eyeHeight = random(20, 50);
    hatAdjustor = random(-30,30);
    hatColor = random (0,196);
    eyebrowHeight = random (200,220);
    pupilSize = random (8,16);

}

I had fun creating a face which includes emotions such as “surprised”, “angry” and “calm.” The story is that the hat accidentally moves and changes color, which surprises the girl. She then becomes angry, since the hat is very out of place.