Liu Xiangqi Project-02-Variable-Face

sketch

// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-02
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeR = 0;
var eyeG = 0;
var eyeB = 0;
var faceR = 255;
var faceG = 230;
var faceB = 230;
var noseX1 = 320;
var noseY1 = 240;
var noseX2 = 310;
var noseY2 = 260;
var noseX3 = 330;
var noseY3 = 260;
var mouthAlpha = 0.5;
var mouthX1 = 310;
var mouthY1 = 280;
var mouthX2 = 315;
var mouthY2 = 275;
var mouthX3 = 320;
var mouthY3 = 280;
var mouthX4 = 325;
var mouthY4 = 275;
var mouthX5 = 330;
var mouthY5 = 280;
var mouthX6 = 325;
var mouthY6 = 290;
var mouthX7 = 315;
var mouthY7 = 290;
var mouthX8 = mouthX1;
var mouthY8 = mouthY1;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    colorMode(RGB,255,255,255,1);
    background(255, 204, 204);
    //draw face
    noStroke();
    fill(faceR, faceG, faceB, 0.3);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
   
    //contour of the eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize+10, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize+10, eyeSize);
    

    //change eye color
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //contour of the nose
    noFill();
    stroke(255);
    strokeWeight(3.0);
    strokeJoin(ROUND);
    beginShape();
    vertex(noseX1, noseY1);
    vertex(noseX2, noseY2);
    vertex(noseX3, noseY3);
    endShape();
    
    //draw the mouth
    fill(255,0,0,mouthAlpha);
    noStroke();
    beginShape();
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX1,  mouthY1);
    curveVertex(mouthX2, mouthY2);
    curveVertex(mouthX3,  mouthY3);
    curveVertex(mouthX4,  mouthY4);
    curveVertex(mouthX5,  mouthY5);
    curveVertex(mouthX6,  mouthY6);
    curveVertex(mouthX7,  mouthY7);
    curveVertex(mouthX8,  mouthY8);
    curveVertex(mouthX8,  mouthY8);
    endShape();
    
}    
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(130, 200);
    eyeSize = random(10, 20);
    //randomize eye color;
    eyeR = random(0, 250);
    eyeG = random(0, 250);
    eyeB = random(0, 250);
    //random face color according to a research of human skin color
    faceR = 168.8 + 38.5*random(-3,3);
    faceG = 122.5 + 3.1*random(-3,3);
    faceB = 96.7 + 6.3*random(-3,3);
    //randomize nose size;
    noseX1 = random(317, 323);
    noseY1 = random(235, 245);
    noseX2 = random(305, 315);
    noseY2 = random(255, 265);
    noseX3 = random(325, 335);
    noseY3 = noseY2;
    //randomize mouth color and shape
    mouthAlpha = random(0.1, 1);
    mouthX1 = random(307, 313);
    mouthX2 = random(314, 316);
    mouthX3 = random(318, 322);
    mouthX4 = random(324, 326);
    mouthX5 = random(327, 333);
    mouthX6 = random(323, 327);
    mouthX7 = random(313, 317);
    mouthY1 = random(275, 285);
    mouthY2 = random(273, 277);
    mouthY3 = mouthY1;
    mouthY4 = mouthY2;
    mouthY5 = mouthY1;
    mouthY6 = random(287, 293);
    mouthY7 = mouthY6;
    
    
    
}

I found some problem when I tried to modify the size of the canvas.