agusman-02-variableface
//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces
var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;
function setup() {
createCanvas(400, 400);
eyeColor1 = color(0)
eyeColor2 = color(255, 200, 255);
}
function draw() {
stroke(0.1)
background(255, 255, 255);
fill(255,255,255);
//Head//
from = color(255, 219, 0);
to = color(182, 152, 0);
noStroke();
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, leftEye, leftEye);
ellipse(eyeRX, height / 2, rightEye, rightEye);
noStroke()
from = color(255, 217, 0);
to = color(253, 176, 0);
for (var i = 0; i < faceWidth; i++) {
fill(lerpColor(to, from, (i+1)/faceWidth));
ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
}
//Draw eyes in the right order
if (eyeVelX>0) {
drawLeftEye();
drawRightEye();
} else {
drawRightEye();
drawLeftEye();
}
//mouth//
arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);
}
//Left Eye//
function drawLeftEye(){
noStroke()
from = color(0, 0, 0);
to = color(255, 200, 255);
for (var i = 0; i < leftEye; i++) {
fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
}
}
//Right Eye//
function drawRightEye(){
noStroke()
from = color(0, 0, 0);
to = color(255, 200, 255);
for (var i = 0; i < rightEye; i++) {
fill(lerpColor(to, from, (i+1)/rightEye));
ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges.
faceWidth = random(150, 200);
faceHeight = random(150, 200);
eyeSize = random(30, 50);
rightEye = random(0, 40);
leftEye = random(0, 40);
mouthHeight = random(10,80)
mouthWidth = random(20, 50)
eyeColor1;
eyeColor2;
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
”
