Project 2 – Variable Face

sketch
//Joseph Kim
//Section D
var eyeWidth = 45;
var eyeHeight = 40;
var faceWidth = 200;
var faceHeight = 260;
var mouthWidth = 60;
var mouthHeight = 30;
let eColor = 180;
//eyes
let fColor = 80;
//face
let bgColor = 0;
//background
let mColor = 120;
//mouth
let earColor = 40;
//ear
let hColor = 20;
//hair
let bColor = 0;
//eyebrow
let iColor = 0;
//iris

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(bgColor);
    noStroke();
    fill(fColor);
    rect((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), faceWidth, faceHeight / 2);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    //face

    fill(eColor);
    var eyeLX = width / 2 - faceWidth * 0.25; 
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD); 
    arc(eyeRX, (height / 2) - 10, eyeWidth, eyeHeight, 0, PI, CHORD);
    //eyeball

    fill(earColor);
    var earLX = (width - faceWidth) / 2;
    var earRX = width - ((width - faceWidth) / 2);
    arc(earLX, height / 2, 30, 30, PI / 2, radians(270), CHORD);
    arc(earRX, height / 2, 30, 30, radians(270), PI / 2, CHORD);
    //ears

    stroke(bColor);
    strokeWeight(5);
    strokeCap(SQUARE);
    var eyebrowLX = width / 2 - faceWidth * 0.35;
    var eyebrowRX = width / 2 + faceWidth * 0.35;
    line(eyebrowLX, (height / 2) - faceHeight / 6, eyebrowLX + (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    line(eyebrowRX, (height / 2) - faceHeight / 6, eyebrowRX - (faceWidth * 0.2), (height / 2) - faceHeight / 6);
    //eyebrow
    
    fill(iColor);
    noStroke();
    circle((width / 2) - (faceWidth * 0.25), height / 2, 10);
    circle((width / 2) + (faceWidth * 0.25), height / 2, 10);
    //iris
    
    noStroke();
    fill(hColor);
    arc((width - faceWidth) / 2, ((height - faceHeight) / 2), faceWidth, 90, 0, PI / 2, PIE);
    arc(width - ((width - faceWidth) / 2), ((height - faceHeight) / 2), faceWidth, 90, PI / 2, PI, PIE);
    //hair

    noStroke();
    fill(mColor);
    arc((width / 2), (height / 2) + (faceHeight / 4), mouthWidth, mouthHeight, 0, PI);
    //mouth

}

    function mousePressed() {

    faceWidth = random(120, 300);
    faceHeight = random(200, 400);
    eyeWidth = random(20, 70);
    eyeHeight = random(40, 70);
    mouthWidth = random(10, 100);
    mouthHeight = random(10, 80);
    mouthColor = random(30, 200);
    eColor = color(random(255), random(255), random(255));
    fColor = color(random(255), random(255), random(255));
    bgColor = color(random(255), random(255), random(255));
    mColor = color(random(255), random(255), random(255));
    earColor = color(random(255), random(255), random(255));
    hColor = color(random(255), random(255), random(255));
    bColor = color(random(255), random(255), random(255));
    iColor = color(random(255), random(255), random(255));
    


    
} 

I first began with the sample code provided on the website. Then, I began customizing the shapes, and added facial features that I thought would be interesting. I found that using variables instead of specific coordinate points are actually easier to work with because I don’t have to be attentive of decimal points. A good part of my process was from trial and error, learning from mistakes. In order to add more visual interest, I had to do some research on how to apply variable color.

Leave a Reply