sketch-beansDownload
//Yeon Lee, Section C
//Project-02: Variable Faces; Face Variables
var backgroundR = 180;
var backgroundG = 200;
var backgroundB = 255;
var head = 190;
var hoodieColorR = 253;
var hoodieColorG = 253;
var hoodieColorB = 150;
var headWidth = 150;
var headHeight = 150;
var eyeSize = 24;
var blushSize = 25;
var mouth = 1
function setup() {
createCanvas(640, 480);
}
function draw() {
background(backgroundR, backgroundG, backgroundB);
//ears + head (back)
var w = 330;
var h = 250;
var earSize = 80;
var earY = h - 0.5 * head;
var leftEarX = w + 0.45 * head; //hoodie size changes every time you click
var rightEarX = w - 0.45 * head;
fill(hoodieColorR, hoodieColorG, hoodieColorB); //hoodie color changes every time you click
noStroke();
ellipse(leftEarX, earY, earSize, earSize); //head with hoodie
ellipse(rightEarX, earY, earSize, earSize);
ellipse(w, 220, head, 1 * head); //cheek shape on the bottom
ellipse(w, 280, 35 - head, head / 2);
//head (front)
fill(255, 255, 255);
ellipse(w, h - 10, head / 1.2, head / 1.2); //face
ellipse(w, h + 30, 45 - head, head / 2); //cheek shape on the bottom
//eyebrows + eyes
var leftEyeX = w - headWidth * 0.3; //eye size changes every time you click
var rightEyeX = w + headWidth * 0.3;
fill(45, 34, 25);
arc(leftEyeX, h - 40, 10, 5, PI, 0); //eyebrows
arc(rightEyeX, h - 40, 10, 5, PI, 0);
ellipse(leftEyeX, h, eyeSize, eyeSize); //eyes
ellipse(rightEyeX, h, eyeSize, eyeSize);
fill(255, 255, 255); //white part of eyes
ellipse(leftEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
ellipse(rightEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
ellipse(leftEyeX, h + 15, eyeSize, eyeSize / 4); //smiling eyes
ellipse(rightEyeX, h + 15, eyeSize, eyeSize / 4);
//nose
var noseX = w;
var noseY = head * 0.05 + 245; //nose size changes every time you click
var noseSize = head / 45;
fill(255, 182, 193);
ellipse(noseX, noseY, noseSize, noseSize - 2);
//blush
var mouthSize = head / 35;
var mouthW = noseSize * 3;
var leftBlushX = w - mouthW * 5;
var rightBlushX = w + mouthW * 5;
fill(255, 139, 139, 50);
ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);
ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);
//mouth
var mouthX = w;
var mouthY = head * 0.05 + 253;
if (mouth < 2){ //mouth changes to either a smile or surprised every time you click
//smile
fill(255, 106, 106);
arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);
} else if (mouth < 3) {
//surprise
fill(255, 106, 106);
ellipse(mouthX, mouthY + 10, 15, 20);
}
}
function mousePressed() {
// when you click, these variables are reassigned
// to random values within specified ranges
backgroundR = random(100, 150);
backgroundG = random(100, 150);
backgroundB = random(200, 250);
head = random(180, 300);
hoodieColorR = random(220, 255);
hoodieColorG = random(220, 255);
hoodieColorB = random(130, 180);
headWidth = random(100, 200);
headHeight = random(100, 250);
eyeSize = random(24, 34);
blushSize = random(25, 30);
mouth = random(1, 3);
}
At first, it was challenging to work with positioning locations, but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.