Gnomes of the world unite!
//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.