Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

sketch

//Alana Wu
//Section C


 var faceWidth = 120;
 var eyeLength = 20;
 var x = 200;
 var y = 250;
 var eyeThickness = 5; //for changing eye thickness
 var randomEars = 1; //for changing hat/ears
 var randomSun = 10; //for changing yellow polka dot locations

function setup() {
    createCanvas(640, 480);
}
 
function draw()
{
    background (51, 0, 102);

//if mouse is pressed on yellow sun, yellow polka dots appear
    if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
        && mouseY > .1*height && mouseY < .3*height) 
    {
        fill (255, 255, 0)
        strokeWeight(0);
        ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
        ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
        ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
        ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
        ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
        ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
        ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
        ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
        ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
        ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
        ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
        ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
    }

//blush button
    strokeWeight (0);
    fill (255, 0, 127);
    rect (15, 15, 70, 40);

//draws blue tear shape button
    fill (0, 0, 255);
    beginShape();
    curveVertex(50, 100);
    curveVertex(50, 100);
    curveVertex(25, 150);
    curveVertex(50, 175);
    curveVertex(75, 150);
    curveVertex(50, 100);
    curveVertex(75, 150);
    curveVertex(50, 100);
    endShape();

//draws sun
    fill (255, 255, 0);
    ellipse (.8*width, .2*height, width/5, width/5);
    strokeWeight(8);
    stroke(255, 255, 0);
    line ( .8*width, .2*height, .8*width + width/6, .2*height);
    line ( .8*width, .2*height, .8*width, .2*height + width/6);
    line ( .8*width, .2*height, .8*width, .2*height - width/6);
    line ( .8*width, .2*height, .8*width - width/6, .2*height);
    line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
    fill (255);
    strokeWeight (0);
    ellipse (x, y, faceWidth, faceWidth); //draws head shape

    strokeWeight (eyeThickness); //thickness of eye line
    stroke(0);
    line (x - faceWidth/5, y - faceWidth/5,
    x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
    line (x + faceWidth/5, y - faceWidth/5,
    x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line


//draws body
    strokeWeight(5);
    stroke(255);
    fill (255);
    line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
    line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
    line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs 
    line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet 
    line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
    if (mouseIsPressed)
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
        stroke(0);
        ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
    }
//when mouse isn't pressed, arms are raised 
   else
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
        stroke (0);
        line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
    }


//blush spots appear when you click "blush" button
    if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
    {
        strokeWeight (0);
        fill (255, 0, 127);
        ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
        ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
    }

// draws blue tear lines under eyes when blue teardrop is clicked
    if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
    {
        stroke (0, 0, 255);
        strokeWeight(8);
        line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
        line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
        strokeWeight (0);

    }

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
    if (randomEars <= 1) //draws panda ears
    {
        fill (0);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        fill (255);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
    }
    else if (randomEars <= 2) //draws red top hat w/ black and white buckle
    {
        strokeWeight (0);
        fill (255, 0, 0);
        rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
        rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
        fill (0);
        rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
        fill (255);
        rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
    }
    else if (randomEars <= 3) //draws pink cone hat
    {
        strokeWeight(0);
        fill (255, 0, 127);
        triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
        fill (255);
        ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
    }   
}


function mousePressed ()
{
    //when user clicks, these variables are reassigned to random values w/n specific ranges
    eyeLength = random (8, 25);
    eyeThickness = random (5, 12);
    randomEars = random (0, 3);
    randomSun = random (5, width/10);

}