Jina Lee – Project – 02

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-02

//variables
var headW = 290;
var headH = 290;
var LeftBrow = 250;
var RightBrow = 250;
var noseW = 50;
var noseH = 50;
var mouth = 80

function setup() {
    createCanvas(480, 640);
//Random Colors
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    background(80, 182, 226);
    noStroke();
//body
    noStroke();
    fill(255, 153, 153);
    ellipse(100, 600, headW * 1.5, headH * 1.5);
//head
    fill("beige");
    ellipse(240, 320, headW, headH);
//nose
    fill(190, 90, 90);
    ellipse(240, 320, noseW, noseH);
//eye whites
    fill("white");
    circle(170, 280, 60);
    circle(310, 280, 60);
//pupils
    fill(r, g, b, 127);
    circle(170, 280, 40);
    circle(310, 280, 40);
//eyebrows
    strokeWeight(20);
    stroke(180, 90, 90);
    line(140, LeftBrow, 200, RightBrow);
    line(340, LeftBrow, 280, RightBrow);
//mouth
    noFill();
    strokeWeight(10);
    arc(230, 380, mouth, mouth, PI / 7, PI);
//ear
    noStroke();
    fill("beige");
    ellipse(100, 300, 30, 40);
    noStroke();
    fill("beige");
    ellipse(380, 340, 30, 40);
}

function mousePressed() {
    var d = dist(mouseX, mouseY, 400, 400);
    if (d < 400) {
        r = random(255);
        g = random(255);
        b = random(255);
        noseW = random(20, 80);
        noseH = random(70, 100);
        headW = random(260, 300);
        headH = random(260, 300);
        LeftBrow = random(200, 250);
        RightBrow = random(200, 250);
        mouth = random(80, 100);
    }
}

When I first started this project, I wasn’t sure where to start. At first, I had a hard time understanding the codes that were used to change the drawing when your mouse clicked on it. I made multiple different iterations, because I was unable to understand the formula correctly for a while. Later, I was finally able to grasp the concept and make my face. I used primitive shapes for the face so that I could focus more on the variabilities. I tried making all the parts of the face have variability. Afterwards, I tried having variability in the eye color which I went to the p5.JS reference page to understand better.