Ghalya Alsanea – Project 02 – Variable Face

Gnomes of the world unite!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceR = 141;
var faceG = 85;
var faceB = 36;
var eyeG = 0;
var eyeB = 0;
var shirtColor = 100;

function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {
    background(150);
    strokeWeight (1);
    stroke(0);

    // face
    fill (faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes
    fill (255);
    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);
    
    //pupils
    fill (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // //nose
    fill (185, 150, 130);
    var noseWidth = faceWidth * 0.15;
    var noseHeight = height / 2 + faceHeight * 0.15;
    triangle(width / 2, height / 2, width / 2 + noseWidth, noseHeight, width / 2 - noseWidth, noseHeight);

    //body
    fill(0, shirtColor, faceB);
    var bodyHeight = faceHeight * 4;
    var bodyX = width / 2;
    var bodyY = height/2 + bodyHeight /2 + faceHeight / 2;
    ellipse(bodyX, bodyY, faceWidth, bodyHeight);

    //hat
    fill(shirtColor, 0, faceB);
    var hatWidth = faceWidth / 2;
    var hatHeight = height / 2 - faceHeight / 3;
    triangle(width / 2, height / 2 - faceHeight, width / 2 - hatWidth, hatHeight, width / 2 + hatWidth, hatHeight);

    //mouth
    noFill();
    strokeWeight (3);
    var mouthHeight = faceHeight * 0.25;
    arc(width / 2, height / 2 + mouthHeight, faceWidth / 2, mouthHeight, 0, 180, OPEN);


    // //eyebrows
    var browLX = width / 2 - faceWidth * 0.25;
    var browRX = width / 2 + faceWidth * 0.25;
    arc(browLX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);
    arc(browRX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);

    //pupils
    fill (0);
    stroke (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    //to random values within specified ranges.
    faceWidth = random(75, 300);
    faceHeight = random(115, 350);
    eyeSize = random(30, 50);
    eyeG = random(0, 255);
    eyeB = random(0, 255);
    shirtColor = random(100, 200);
    
    //random skin color generator
    var x = round(random (0.5, 5.5));

    // skin shade 1 -- Russet
    if (x == 1) {
        faceR = 141;
        faceG = 85;
        faceB = 36;
    } 

    // skin shade 2 -- Peru
    if (x == 2) {
        faceR = 198;
        faceG = 134;
        faceB = 66;
    } 

    // skin shade 3 -- Fawn
    if (x == 3) {
        faceR = 224;
        faceG = 172;
        faceB = 105;
    } 

    // skin shade 4 -- Mellow Apricot
    if (x == 4) {
        faceR = 241;
        faceG = 194;
        faceB = 125;
    } 

    // skin shade 5 -- Navajo White
    if (x == 5) {
        faceR = 255;
        faceG = 219;
        faceB = 172;
    } 


}

I wanted to create different gnomes and have their hat and shirt color be relative to each other, so I referenced the RGB value of the skin value. That way their outfits somehow match.

Also, I wanted to create real skin tones and used the generic 5 shade skin tones found here, and randomized it so that every time you click, the skin changes.

Finally, the eyebrows and smiles and the rest of the facial features are referencing each other so that they change proportionally with the face size and eye size.