![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
For this project, I decided to create different monsters/creatures, and focussed on conveying both their physical characteristics as well as their emotions or personalities. When approaching this project, I struggled with deciding on a concept, and kept it fairly simple, changing more of the facial aspects of the creatures, rather than adding arms or tails.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Section B, Project 02 Variable Face
// starting variables
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 200;
var CornerT = 30;
var CornerB = 15;
var toothExistence1 = 0;
var toothExistence2 = 0;
var faceY = 340;
var bodyWidth = 250;
var mouthWidth = 100;
var mouthHeight = 50;
var eyebrowY = 320;
var r = 243;
var g = 179;
var b = 174;
var pupilDX = 6;
var pupilDY = 5;
var w = 5
function setup() {
createCanvas(480, 640);
}
function draw() {
background('white');
noStroke();
//background color
fill(r, g, b, 55);
rect(width / 2, height / 2, width, height);
//body
fill('white');
rectMode(CORNERS);
var faceX = width / 2;
rect(faceX - bodyWidth / 2, faceY + faceHeight / 2, faceX + bodyWidth / 2, height, CornerT, CornerT, 0, 0);
//stomach
fill(r, g, b, 100);
rect(faceX - bodyWidth * 0.25, faceY + faceHeight * 0.75, faceX + bodyWidth * 0.25, height, 50, 50, 0, 0);
//face
fill('white');
rectMode(CENTER);
rect(faceX, faceY, faceWidth, faceHeight + 1, CornerT, CornerT, CornerB, CornerB);
//mouth
noStroke();
fill(r, g, b);
var mouthY = faceY + faceHeight * 0.25
rect(faceX, mouthY, mouthWidth, mouthHeight, 50, 50, 50, 50);
//tooth and teeth
fill('white');
triangle(faceX * toothExistence1, (mouthY - mouthHeight / 2 - 1) * toothExistence1, (faceX + mouthWidth * 0.5) * toothExistence1, (mouthY - mouthHeight / 2 - 1) * toothExistence1, (faceX + mouthWidth * 0.25) * toothExistence1, mouthY * toothExistence1);
triangle(faceX * toothExistence2, (mouthY - mouthHeight / 2 - 1) * toothExistence2, (faceX - mouthWidth * 0.5) * toothExistence2, (mouthY - mouthHeight / 2 - 1) * toothExistence2, (faceX - mouthWidth * 0.25) * toothExistence2, mouthY * toothExistence2);
//eyes
var eyeLX = faceX - faceWidth * 0.25;
var eyeRX = faceX + faceWidth * 0.25;
stroke('black');
noFill();
strokeWeight(5);
ellipse(eyeLX, faceY, eyeSize, eyeSize);
ellipse(eyeRX, faceY, eyeSize, eyeSize);
//eye pupils
noStroke();
fill('black');
var pupilLX = eyeLX + eyeSize * 0.125;
var pupilRX = eyeRX + eyeSize * 0.125;
var pupilY = faceY + eyeSize * 0.125;
ellipse(pupilLX - pupilDX, pupilY - pupilDY, eyeSize * 0.625, eyeSize * 0.625);
ellipse(pupilRX - pupilDX, pupilY - pupilDY, eyeSize * 0.625, eyeSize * 0.625);
//eyebrows
stroke('black');
strokeWeight(w);
line(eyeLX - eyeSize / 2, faceY - eyeSize, eyeLX + eyeSize / 2, eyebrowY);
line(eyeRX + eyeSize / 2, faceY - eyeSize, eyeRX - eyeSize / 2, eyebrowY);
}
function mousePressed() {
//color of background and mouth
r = random(255);
g = random(255);
b = random(255);
//face and body proportions
faceY = random(200, 350);
faceWidth = random(100, 250);
faceHeight = random(150, 300);
bodyWidth = random(50, 300);
//roundness of face and body
CornerT = random(10, 50);
CornerB = random(10, 50);
//size of eyes, angle of eyebrows, and location of pupils
eyeSize = random(15, 40);
let existence1 = ['0', '1'];
eyebrowY = random(faceY - eyeSize * 0.5, faceY - eyeSize * 1.5);
pupilDX = random(eyeSize * 0.25);
pupilDY = random(eyeSize * 0.25);
//stroke weight for eyebrows
w = random(1, 15);
//proportions of mouth and how many teeth
mouthWidth = random(15, 100);
mouthHeight = random(15, 50);
toothExistence1 = random(existence1);
let existence2 = ['0', '1'];
toothExistence2 = random(existence2);
}
