//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-02: Variable Faces; Face Variables
var eyeWidth = 22;
var eyeHeight = 22;
var mouthSize = 40;
var cheekR = 234;
var cheekG = 175;
var cheekB = 152;
var cheekWidth = 60;
var cheekHeight = 60;
var hairR = 76;
var hairG = 54;
var hairB = 36;
var eyebrowWidth = 40;
var eyebrowHeight = 10;
//var leftBrowX = 253;
var BrowY = 210;
//var rightBrowX = 347;
var BrowY = 210;
function setup() {
createCanvas(640,480);
background(145, 193, 191);
noStroke();
}
function draw() {
fill(hairR-30, hairG-30, hairB-50); //background hair //fill(31, 34, 13);
quad(200, 195, 400, 185, 425, 375, 180, 375);
fill(234, 178, 117); //neck
rect(263, 380, 78, 78);
fill(235, 207, 155); //face
ellipse(300, 260, 210, 260);
fill(200, 125, 95); //mouth
ellipse(600/2, 600/2 +10, 60, mouthSize);
fill(235, 207, 155);//eclipse over mouth
rect(600/2 -40, 600/2 -75, 70, 85);
fill(cheekR, cheekG, cheekB); //left blush //fill(234, 175, 152);
ellipse(235, 265, cheekWidth, cheekHeight); //ellipse(235, 265, 60, 60);
fill(cheekR, cheekG, cheekB); //right blush
ellipse(365, 265, cheekWidth, cheekHeight);
fill(61, 44, 23); //left eye
ellipse(250, 240, eyeWidth, eyeHeight);
fill(61, 44, 23); //right eye
ellipse(350, 240, eyeWidth, eyeHeight);
fill(hairR-20, hairG-10, hairB-20); //left eyebrow // ellipse(253, 210, 40, 10)
ellipse(253, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(253, 210, width, height)
fill(hairR-20, hairG-10, hairB-20); //right eyebrow
ellipse(347, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(347, 210, width, height)
fill(234, 178, 117); //nose
triangle(300, 267, 320, 290, 280, 290);
fill(hairR, hairG, hairB); //more hair// fill(76, 54, 36);
quad(222, 159, 345, 129, 420, 220, 391, 230);
fill(hairR, hairG, hairB); //more hair
quad(371, 398, 391, 228, 421, 219, 433, 340);
fill(hairR, hairG, hairB); //more hair
quad(215, 156, 183, 234, 206, 245, 247, 163);
fill(hairR, hairG, hairB); //more hair
quad(183, 234, 174, 345, 237, 400, 207, 244);
fill(hairR, hairG, hairB); // top part of hair
quad(216, 157, 275, 123, 377, 132, 420, 219);
fill(hairR, hairG, hairB);
triangle(183, 235, 207, 149, 275, 122);
}
function mousePressed() {
eyeWidth = random(20, 35);
eyeHeight = random(15, 35);
mouthSize = random(10, 85);
cheekR = random(234, 274);
cheekG = random(175, 195);
cheekB = random(152, 172);
hairR = random(50, 100);
hairG = random(54, 80);
hairB = random(36, 70);
eyebrowWidth = random(35, 50);
eyebrowHeight = random(10, 20);
cheekWidth = random(50, 75);
cheekHeight = random(50, 75);
BrowY = random(210, 223);
//leftBrowX = random (253, 263);
//rightBrowX = random (347, 357);
}
I used my previous face from the self-portrait as a base. I did a sketch in Illustrator for that face to give me direction as I drew it in code.
It took me a couple times to get used to manipulating the different values as variables, but once I got the hang of a few variables, it was easier for me to think of other values to turn into variables. Rather than make completely different faces, I made my program create mildly different versions of my self portrait. If I changed the hair too, it’d be drastically different, but I like it this way.