![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
/* Rani Randell
Section A
rrandell@andrew.cmu.edu
Project 2 variable faces */
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var backcolor;
var mouthW = 70;
var mouthH = 30;
function setup() {
createCanvas(640, 480);
var R = random(20, 250);
var G = random(100, 200);
var B = random(10, 200);
backcolor = color(R, G, B);
}
function draw() {
background(backcolor);
fill(230, 10, 200)
ellipse(width / 2, height / 2, faceWidth, faceHeight);//face
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(10, 30, 200);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
fill(30, 70, 70);
ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye
rect(width/2 - 35, height/2- 20, 20, 3)//eyebrows
rect(width/2 + 15, height/2- 20, 20, 3)
fill(200, 10, 120); //mouth color
ellipse(width/2, height/2+40, mouthW, mouthH)//mouth
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
var R = random(20, 250);
var G = random(100, 200);
var B = random(10, 200);
backcolor = color(R, G, B);
mouthH = random(10, 40);
mouthW = random(60, 90);
}
For my Variable Faces project, I wanted to explore randomizing different colors of the background when the mouse is pressed. I accomplished this by making distinct RGB variables and then randomizing them in the mousePressed function.
