Project – 02

sketch

sketch

//Leo Deng Section A

var eyeWidth = 20;
var eyeHeight = 20;
var faceWidth = 140;
var faceHeight = 160;
var LeyebrowX = 115;
var LeyebrowY = 125;
var ReyebrowXx = 185;
var ReyebrowYy = 125;
var mouthX = (300 / 2);
var mouthY = (300/2 + 40); 
var mouthW = 30;
var mouthH = 10;
var mouthStart = 90;
var mouthEnd = 195;
var on = -1;
var R = 255;
var G = 215;
var B = 0;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(233,150,122);
    strokeWeight(3);
    stroke(175,238,238);
    if (on == -1) {         //color flip from yellow to orange
        fill(R, G, B);
    } else if (on == 1) {
        fill(R, G - 100, 0);
    }
    triangle(0, 0, 125, 145, 145, 100);  //pointy design elements
    triangle(150, 0, 100, 145, 200, 145);
    triangle(299, 0, 185, 145, 100, 145);
    triangle(299, 150, 165, 100, 165, 195);
    triangle(0, 150, 135, 100, 135, 195);
    triangle(0, 299, 125, 155, 145, 200);
    triangle(150, 299, 100, 155, 200, 155);
    triangle(299, 299, 185, 155, 100, 155);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;           //local eye variables
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    line(LeyebrowX, LeyebrowY, 135, 125);                //eyebrows
    line(165, 125, ReyebrowXx, ReyebrowYy);
    ellipse(eyeLX, height / 2, eyeWidth * (2 / 3), eyeHeight);  //eyes
    ellipse(eyeRX, height / 2, eyeWidth * (2 / 3), eyeHeight);
    arc(mouthX, mouthY, mouthW, mouthH, mouthStart, mouthEnd, PIE);  //mouth

}
 
function mousePressed() {
    on = on * -1;
    // when the user clicks, these variables are reassigned to make the face look angry
    faceWidth = (faceWidth + 50);
    eyeWidth = (eyeWidth + 10);
    LeyebrowX = (LeyebrowX - 10);
    LeyebrowY = (LeyebrowY - 10);
    ReyebrowXx = (ReyebrowXx + 10);
    ReyebrowYy = (ReyebrowYy - 10);
    mouthX = (mouthX - 10);
    mouthH = (mouthH + 10);

if(faceWidth > 190) {
    // next 3 clicks changes from mischevious face to unsure face
        faceWidth = (faceWidth - 60);
        eyeWidth = (eyeWidth - 10);
        LeyebrowX = (LeyebrowX + 15);
        LeyebrowY = (LeyebrowY + 15);
        ReyebrowXx = (ReyebrowXx - 15);
        ReyebrowYy = (ReyebrowYy + 15);
        mouthX = (mouthX + 5); 
        mouthW = (mouthW + 10);
        mouthH = (mouthH - 10);
        mouthStart = 0;
        mouthEnd = PI + QUARTER_PI;

    }

if(faceWidth < 160) {
    //return to original face
eyeWidth = 20;
eyeHeight = 20;
faceWidth = 140;
faceHeight = 160;
LeyebrowX = 115;
LeyebrowY = 125;
ReyebrowXx = 185;
ReyebrowYy = 125;
mouthX = (300 / 2);
mouthY = (300/2 + 40);
mouthW = 30;
mouthH = 10;
mouthStart = 90;
mouthEnd = 195;
on = -1;
R = 255;
G = 215;
B = 0;
}
}