Lingfan Jiang – Project 02- Variable Face

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-02-Variable-Face


var eyeWidth = 50;
var eyeHeight = 80;
var angle = 0;
var eyeSize = 1
var eyeBall = 50;
var eyeBrow = 75;
var eyeBrow2 = 65;


function setup(){
    createCanvas(480,640);

}

function draw(){
    background(255);
    translate(width/2,height/3);

    stroke(0);
    strokeWeight(8);
    //eyebrow on the left
    beginShape();
    curveVertex(-100, -50);
    curveVertex(-75, -eyeBrow);
    curveVertex(-50, -eyeBrow);
    curveVertex(-25, -50);
    endShape();

    //eyebrow on the right
    beginShape();
    curveVertex(100, -50);
    curveVertex(75, -eyeBrow-20);
    curveVertex(50, -eyeBrow2-30);
    curveVertex(25, -50);
    endShape();

    strokeWeight(2);
    angleMode(DEGREES);
    ellipseMode(CENTER);

    //left eye
    push();
    rotate(angle);
    fill(255);
    ellipse(-50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(-eyeBall,0,7,10);
    pop();

    //right eye
    push();
    scale(eyeSize);
    fill(255);
    ellipse(50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(eyeBall,0,7,10);
    pop();

    // mouse (using eyebrow to draw the mouse)
    stroke(0);
    strokeWeight(3);
    scale(eyeSize);
    beginShape();
    curveVertex(-75, 1.5 * eyeBrow2);
    curveVertex(-25, 1.7 * eyeBrow);
    curveVertex(25, 1.7 * eyeBrow);
    curveVertex(75, 1.5 * eyeBrow2);
    endShape();

    //nose
    fill(0);
    ellipse (0,40,15,5);
    
}

function mousePressed(){
    eyeWidth = random(30,50);
    eyeHeight = random(50,80);
    angle = random(-45,0);
    eyeSize = random(0.5, 1.5);
    eyeBall = random(35,60)
    eyeBrow = random(25,85);
    eyeBrow2 = random(35,65);
}

In this project, I am inspired by those cartoon faces online. Therefore, I decided to go with this kind of style without the shape of face or color. One thing I found pretty interesting is that the random syntax in javascript is not completely random. Before starting this project, I assumed that I could use the same random variable to do different values on different objects. As it turns out, it is a bit different. In the end, I am satisfied with the final result, but it does have some problems when certain parts grow too big and intersect with other shapes.

reference: http://www.yim778.com/group/facial-expressions-pictures-cartoons/