Yingyang Zhou-Project-02-Variable-Face

Variable Face

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-02-A



var faceWidth =235;
var eyebrow = 8;
var mouth = 20;
var nose = 30;
var eyeSize = 20;
var neck = 150;
var shoulder = 450;
var noseR = 200;
var noseG = 100;
var noseB = 100;
var hairR = 130;
var hairG = 120;
var hairB = 110;
var shoulderCurve = 50;

function setup() {
    createCanvas(600, 600);
    background(208, 142, 44);

}

function draw() {
    //face
    fill(255);
    noStroke();
    ellipse(width/2, width/3, faceWidth, 1.2*faceWidth);
    //neck
    rect(width/2 - neck/4, height/2, neck/2, neck);
    //shoulder
    fill(147, 91, 4);
    rect(width/2 - shoulder/2, width - shoulder/3, shoulder, shoulder/2, shoulderCurve);
    //eye
    fill(0);
    ellipse(225, 141, eyeSize, eyeSize);
    ellipse(290, 156, eyeSize, eyeSize);
    //nose
    noStroke();
    fill(noseR, noseG, noseB);
    triangle(217, 210, 217+nose/2, 210-nose, 210+nose/2, 210);
    //hair
    fill(hairR, hairG, hairB);
    noStroke();
    beginShape();
    curveVertex(270, 290);
    curveVertex(270, 370);
    curveVertex(196, 395);
    curveVertex(175, 220);
    curveVertex(220, 80);
    curveVertex(325, 25);
    curveVertex(438, 80);
    curveVertex(466, 421);
    curveVertex(317, 423);
    curveVertex(347, 131);
    curveVertex(301, 72);
    curveVertex(190, 198);
    curveVertex(208, 274);
    curveVertex(270, 290);
    curveVertex(270, 375);
    curveVertex(270, 377);
    endShape();
    //mouth
    ellipse(225, 250, mouth, mouth/3)
}

function mousePressed(){
    eyeSize = random(5, 20);
    noseR = random(0, 255);
    noseG = random(0, 255);
    noseB = random(0, 255);
    hairR = random(0, 255);
    hairG = random(0, 255);
    hairB = random(0, 255);
}

I started using CurveVertex in this project and turn out a very smooth curve.
Hair color, mouth color and size of eyes and nose are changing with every click. I had a lot of fun in this.