Sofia Syjuco – Project-02

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-02-C

// 5 pixels / inch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthWidth = 50;
var mouthHeight = 20;
var pupilSize = 10;
var cheekSize = 10;
var noseWidth =5;
var noseHeight = 20;
var browHeight = 2;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(244,147,144);
    noStroke (0);

    //Ears. On either side of the middle of the face.
    fill (217,115,77);
    ellipse(width/2 - faceWidth/2, height / 2, eyeSize, eyeSize);
    ellipse(width/2 + faceWidth/2, height / 2, eyeSize, eyeSize);

    //Face: Center of canvas
    fill (217,115,77);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    //Cheeks (blush). Positioned just under the eyes, but same idea.
    fill (255,104,77);
    var cheekLX = width / 2 - faceWidth * 0.25;
    var cheekRX = width / 2 + faceWidth * 0.25;
    ellipse(cheekLX, height/2 + faceHeight/8, cheekSize, cheekSize);
    ellipse(cheekRX, height/2 + faceHeight/8, cheekSize, cheekSize);

    //Eyes.
    fill (250);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Eyebrows, just above the eyes
    fill (0);
    ellipse(eyeLX, height / 2 - eyeSize/2, eyeSize, browHeight);
    ellipse(eyeRX, height / 2 - eyeSize/2, eyeSize, browHeight);

    //Pupils, in center of the eyes
    fill (0);
    ellipse (eyeLX, height/2, pupilSize, pupilSize);
    ellipse (eyeRX, height/2, pupilSize, pupilSize);

    //Mouth
    fill (246,30,74);
    ellipse (width/2, height/2 + faceHeight/4, mouthWidth, mouthHeight);

    //Nose
    fill (179,66,34);
    ellipse (width/2, height/2 + faceHeight/15, noseWidth, noseHeight);

}
 
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.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(16, 30);
    mouthWidth = random(20, 50);
    mouthHeight = random(10, 15);
    pupilSize = random(2, 15);
    cheekSize = random(10, 25);
    noseWidth = random(5, 15);
    noseHeight = random(10, 30);
    browHeight = random(2, 5);
}

My process involved a lot of experimentation. Being a visual learner, it’s hard to try and understand things purely in terms of numbers. This project allowed me greater freedom with which to practice my programming, but set it within the bounds of facial proportions – which is something I am more familiar with. I am trying to stay away from using “magic numbers,” and instead work through how I can represent values through arithmetic and variables.