Lan Wei-Project-02-Variable-Face

sketch

var facePink = 20;
var eyeW = 50;
var eyeH = 7;
var eyebrowH1 = 270;
var eyebrowH2 = 270;
var mouthH = 355;

function setup() {
    createCanvas(640, 480);
    background(255, 196, 238);
    strokeWeight(3);
}

function draw() {
    //hat
    fill(196, 42, 42);
    stroke(196, 42, 42);
    ellipse(300, 260, 205, 195);

    //quilt
    ellipse(300, 570, 320, 500);
    stroke(232, 139, 139);
    push();
    strokeWeight(40);
    beginShape();
    curveVertex(240, 350);
    curveVertex(240, 290);
    curveVertex(230, 370);
    curveVertex(350, 440);
    curveVertex(360, 470);
    curveVertex(350, 500);
    curveVertex(330, 600);
    curveVertex(330, 700);
    endShape();
    pop();

    //face
    fill(250, 240, 200);
    stroke(250, 240, 200);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 240);
    curveVertex(230, 350);
    curveVertex(300, 400);
    curveVertex(370, 350);
    curveVertex(380, 240);
    curveVertex(380, 100);
    endShape();
    push();
    fill(232, 169, 132);
    stroke(232, 169, 132);
    ellipse(250, 360, facePink, facePink);
    ellipse(350, 360, facePink, facePink);
    pop();

    //eyebrow
    stroke(0);
    push();
    strokeWeight(5)
    line(230, eyebrowH1, 270, eyebrowH2);
    line(370, eyebrowH1, 330, eyebrowH2);
    pop();

    //eye
    line(220, 320, 270, 330);
    push();
    translate(350, 325);
    fill(255);
    strokeWeight(2);
    rotate(radians(-7));
    ellipse(0, 0, eyeW, eyeH);
    strokeWeight(3);
    ellipse(-2, 0, 5, 5);
    pop();

    //mouth
    fill(250, 70, 70);
    stroke(250, 70, 70);
    triangle(300, mouthH, 293, 375, 307, 375);
    fill(255);

    //hair
    fill(0);
    stroke(0);
    quad(220, 241, 170, 330, 230, 370, 230, 350);
    quad(380, 241, 370, 241, 370, 370, 450, 330);

    //hat part 2
    fill(207, 71, 71);
    stroke(207, 71, 71);
    ellipse(300, 247, 175, 45);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    facePink = random(15, 30);
    eyeW = random(45, 52);
    eyeH = random(7, 40);
    eyebrowH1 = random(250, 270);
    eyebrowH2 = random(265, 285);
    mouthH = random(350, 370);
}

It’s fun to add dynamic effect to an image with randomness. And I find the mousePressed() function very useful to interact with audiences.