mdambruc-Project-02-Variable-Face

project-02-variable-face

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-02-Variable-Face.js

var faceWidth = 300;
var faceHeight = 180;
var mouthWidth = 30;
var eyebrowHeightL = 209;
var tongueHeight = 50;
var pupilcolor = 0

function setup() {
    createCanvas(640, 480);
}
function draw() {
    background(153, 196, 178);
    fill (234, 255, 16);
    rect(width / 4, height / 3, faceWidth,  faceHeight);//face

    fill(255);
    var eyeLX = width / 1.5 - faceWidth * 0.5;
    var eyeRX = width / 3 + faceWidth * 0.5;
    ellipse(eyeLX, height / 2, 50, 50);
    ellipse(eyeRX, height / 2, 50, 50);//eyes

    fill(pupilcolor);
    var pupilsize = 25;
    var pupilLX = eyeLX;//aligned with eyes
    var pupilRX = eyeRX;
    ellipse(pupilLX, height / 2, pupilsize, pupilsize); //left pupil
    ellipse(pupilRX, height/ 2, pupilsize, pupilsize); //right pupil

    fill(234, 142, 142);
    arc(width / 2, (height / 2) + 40, mouthWidth, 30, 0, PI); //mouth

    fill(255, 0, 95);
    arc(width/2, (height / 2)+ 40, 15, tongueHeight, 0, PI); // tongue

    fill(0);
    ellipse(308, 272, 20, 5);
    ellipse(330, 272, 20, 5);//mustache

    fill(0);
    line(258, eyebrowHeightL, 299, eyebrowHeightL);// left eyebrow
    line(345, 212, 387, 212);//right eyebrow

    fill(108, 84, 28);
    beginShape();
    curveVertex(267, 148);
    curveVertex(299, 161);
    curveVertex(374, 160);
    curveVertex(386, 150);
    curveVertex(363, 145);
    curveVertex(355, 116);
    curveVertex(344, 110);
    curveVertex(326, 118);
    curveVertex(317, 110);
    curveVertex(302, 108);
    curveVertex(292, 143);
    curveVertex(272, 146);
    curveVertex(268, 154);
    curveVertex(267, 148);
    endShape();//fedora

}

function mousePressed() {
    mouthWidth = random (10, 70);//changes width of mouth
    eyebrowHeightL = random(190, 212);//changes height of left eyebrow
    tongueHeight = random(10, 100);//changes how long the tongue is
    pupilcolor = random (0, 255);//changes pupil color

}

I call him “Le Provocateur”, because the features that change when clicked make him a bit provocative. In my process I struggled with aligning all of the features and using more efficient shortcuts. However, I’ve gotten a lot more comfortable with the program.