Taisei Manheim – Project – 02 – Variable – Face

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-02

var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 200;
var mouthWidth = 10;
var mouthHeight = 10;
var bodyWidth = 300;
var bodyHeight = 200;
var color = 100;
var armWidth = 20;
var armHeight = 100;

function setup() {
    createCanvas(600, 480);
}

function draw() {
    background('pink');

    fill(50, 155, 255);
    fill(50, 155 - color, 255 - color);

    var armLx = width / 2 - bodyWidth / 4 - armWidth / 2
    var armRx = width / 2 + bodyWidth / 4 - armWidth / 2
    var armLy = height / 2 + faceHeight / 2 - armHeight + 40
    var armRy = height / 2 + faceHeight / 2 - armHeight + 40
    rect(armLx, armLy, armWidth, armHeight);
    rect(armRx, armRy, armWidth, armHeight);
    //arms

    ellipse(armLx + armWidth / 2, armLy, 40, 60);
    ellipse(armRx + armWidth / 2, armRy, 40, 60);
    //hands

    var bodyPos = height / 2 + faceHeight / 2 + bodyHeight / 2 - 10
    ellipse(width / 2, bodyPos, bodyWidth, bodyHeight);
    //body

    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    //face

    fill('white')
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height / 2, 2.5 * eyeSize, eyeSize, 0, PI);
    arc(eyeLX, height / 2 + 2, 2.5 * eyeSize, eyeSize, PI, PI + PI, OPEN);
    arc(eyeRX, height / 2, 2.5 * eyeSize, eyeSize, 0, PI);
    arc(eyeRX, height / 2 + 2, 2.5 * eyeSize, eyeSize, PI, PI + PI, OPEN);
    //eyes

    fill('black');
    ellipse(eyeLX, height / 2 + 1, eyeSize - 2, eyeSize - 2);
    ellipse(eyeRX, height / 2 + 1, eyeSize - 2, eyeSize - 2);
    //pupils

    fill('black');
    rect(eyeLX - 15, height / 2 - faceHeight / 4, 30, 8);
    rect(eyeRX - 15, height / 2 - faceHeight / 4, 30, 8);
    //eyebrows

    fill(255, 0, 0);
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthWidth, mouthHeight);
    //mouth

    fill('orange');
    rect(width / 2 - 60, height / 2 - 10 - faceHeight / 2, 120, 30);
    rect(width / 2 - 25, height / 2 - 110 - faceHeight / 2, 50, 100);
    //top hat
}

function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 20);
    mouthWidth = random(5, 30);
    mouthHeight = random(5, 30);
    bodyWidth = random(300, 500);
    bodyHeight = random(200, 400);
    color = random(0,155);  
    armWidth = random(20, 30);
    armHeight = random(80, 120);
}

When coding this project, at first I had difficulty controlling the different variables in order to make them work in the way that I wanted them to, such as the color of the face and body.  However, once I got the hang of it I was able to have multiple elements of the face changing at the same time without the face becoming too distorted.