## Tanvi Harkare – Project 02 – Variable Face

``````/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-02-Face Variables */

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColorR = 150
var eyeColorG = 250
var eyeColorB = 5;
var mouthWidth = 50;
var mouthHeight = 30;
var mouthY = 340;
var browHeight = 300;
var eyeHeight = 320;

function setup() {
createCanvas(480, 640);
}

function draw() {
background(150);

//hair
stroke(0);
strokeWeight(150);
line(width/2, height/2 - 20, width/2, height - 225);

//face
fill(255, 220, 177);
noStroke();
ellipse(width / 2, height / 2, faceWidth,  faceHeight);

//eyes
noStroke();
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(255);
ellipse(eyeLX, eyeHeight, eyeSize, eyeSize); //left eye
ellipse(eyeRX, eyeHeight, eyeSize, eyeSize); //right eye
//pupils
fill(eyeColorR, eyeColorG, eyeColorB);
ellipse(eyeLX, eyeHeight, eyeSize/2, eyeSize/2); //left pupil
ellipse(eyeRX, eyeHeight, eyeSize/2, eyeSize/2); //right pupil

//mouth
noFill();
strokeWeight(2);
stroke(100, 75, 80);
arc(240, mouthY, mouthWidth, mouthHeight, 0, 3.14, OPEN);

//eyebrows
strokeWeight(2);
stroke(0);
line(eyeLX - 10, eyeHeight - 10 - eyeSize, eyeLX + 10, eyeHeight - 10 - eyeSize);
line(eyeRX - 10, eyeHeight - 10 - eyeSize, eyeRX + 10, eyeHeight - 10 - eyeSize);

//nose
noStroke();
fill(198, 171, 137);
ellipse(width/2, height/2 + eyeSize, 10, 8);
}

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(100, 130);
faceHeight = random(110, 160);
eyeSize = random(10, 20);
eyeColorR = random(0, 255);
eyeColorG = random(0, 255);
eyeColorB = random(0, 255);
mouthWidth = random(30, 60);
mouthHeight = random(20, 40);
mouthY = random(335, 350);
browHeight = random(290, 305);
eyeHeight = random(315, 325);
}``````

For this project, I created a face from simple shapes such as ellipses, arcs, and lines. My favorite part of the project was coming up with different ways to create a unique face with colors, size, and position on the face. At first I had a difficult time dealing with facial features that were overlapping, but was able to solve that by changing the values of the random integers near the end .

## Xindi Lyu-Project-02-Variable-faces

``````/*Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-02-Face Variables */

//face
var faceWidth = 100;
var faceHeight =95;

var skinR = 250;
var skinG = 180;
var skinB = 150;
//eyes

var color1 = 0;
var color2 = 0;
var color3 = 0;

//hair
var hairR = 200;
var hairG = 40;
var hairB = 210;

function setup() {
createCanvas(640, 480);
background(200);
text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw(){
createCanvas(640, 480);
noStroke();
background(skinR*(1/5),skinG*(1/5), skinB);

//hair
fill(hairR, hairG, hairB);
rect(320-faceWidth/2-20, 240-faceHeight/2-30, faceWidth+40, faceHeight+60, 150,150,10,10);

//face
fill(skinR,skinG,skinB);
rect(320-faceWidth/2, 240-faceHeight*7/24, faceWidth, faceHeight, 10,10, 70,70);

//eyes
fill(color1, color2, color3);
rect(320-faceWidth/2+15, 240-faceHeight/2+50, 10, faceHeight*1/4);
rect(320+faceWidth/2-25, 240-faceHeight/2+50, 10, faceHeight*1/4);

//mouth
noFill();
stroke(skinR*1/2, skinG*1/2, skinB*1/2);
arc(320,240-faceHeight/2+80,12,6,0,PI);
}

function mousePressed() {
faceWidth = random(95,110);
faceHeight = random(90, 140);
skinR = random(220,280);
skinG = random(150,210);
skinB = random(120,170);
color1 = random(0,255);
color2 = random(0,255);
color3 = random(0,255);
hairR = random(150,250);
hairG = random(0,90);
hairB = random(160,270);

}

``````

For this project I played with color variations and light changes of face length and width.

## Katherine Hua – Project 02 – Variable Face

``````/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/

var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;

function setup() {
createCanvas(480, 640);
background(backgroundColorR, backgroundColorG, backgroundColorB);
}

function draw() {

//background
background(backgroundColorR, backgroundColorG, backgroundColorB);

ellipse(x, 80, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 160, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 240, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 320, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 400, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 480, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 560, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
//y
ellipse(y, 80, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 160, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 240, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 320, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 400, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 480, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 560, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
//z
ellipse(z, 80, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 160, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 240, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 320, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 400, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 480, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 560, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
//a
ellipse(a, 80, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 160, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 240, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 320, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 400, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 480, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 560, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
//b
ellipse(b, 80, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 160, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 240, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 320, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 400, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 480, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 560, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
//c
ellipse(c, 80, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 160, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 240, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 320, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 400, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 480, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 560, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
//d
ellipse(d, 80, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 160, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 240, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 320, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 400, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 480, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 560, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
//e
ellipse(e, 80, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 160, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 240, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 320, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 400, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 480, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 560, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
//f
ellipse(f, 80, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 160, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 240, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 320, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 400, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 480, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 560, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}

//character shape
strokeWeight(5);
point(0, 640);
point(40, 440);
point(70,320);
point(150, 160);
point(300, 160);
point(380, 300);
point(420, 440);
point(480, 640);
strokeWeight(5);
fill(250-skin, 223-skin, 198-skin);
beginShape();
curveVertex(0, 640);
curveVertex(0, 640);
curveVertex(40, 440);
curveVertex(70, 320);
curveVertex(150, 160);
curveVertex(300, 160);
curveVertex(380, 300);
curveVertex(420, 440);
curveVertex(480, 640);
curveVertex(480, 640);
endShape();
beginShape();
curveVertex(120, 500);
curveVertex(120, 500);
curveVertex(170, 560);
curveVertex(210, 565);
curveVertex(170, 440);
curveVertex(150, 400);
curveVertex(150, 440);
endShape();
beginShape();
curveVertex(360, 500);
curveVertex(360, 500);
curveVertex(310, 560);
curveVertex(270, 565);
curveVertex(310, 440);
curveVertex(330, 400);
curveVertex(330, 440);
endShape();

//hair
if (hair < 1) {
fill(0, 0, 0)
arc(230, 280, 300, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 2) {
fill(0, 0, 0)
arc(230, 280, 350, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
fill(0,0,0);
rect(52, 275, 50, 125, 5);
rect(358, 275, 50, 125 ,5);
}
else if (hair < 3) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(120, 120, 75, 75);
ellipse(340, 120, 75, 75);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 4) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(57, 280, 80, 50);
ellipse(403, 280, 80, 50);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}

//brows
if (brows < 1) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
}
else if (brows < 2) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI, PI+HALF_PI);
arc(270, 275, 30, 30, PI+HALF_PI, 0);
}
else if (brows < 3) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+HALF_PI, 0);
arc(270, 275, 30, 30, PI, PI+HALF_PI);
}
else if (brows < 4) {
stroke(0,0,0);
noFill();
arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
}

//eyes
//whites
fill(255);
ellipse(180, 300, eyeWidth, eyeHeight);
ellipse(270, 300, eyeWidth, eyeHeight);
//pupil
fill(0);
ellipse(180, 300, pupilWidth, pupilHeight);
ellipse(270, 300, pupilWidth, pupilHeight);

//lips
if (lips < 1) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
}
else if (lips < 2) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
}
else if (lips < 3) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
else if (lips < 4) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}

//cheeks
fill(cheekColorR, cheekColorG, cheekColorB);
noStroke();
ellipse(140, 320, 40, 20);
ellipse(320, 320, 40, 20);

stroke(0,0,0);
}

function mousePressed() {
backgroundColorR = random(200, 255);
backgroundColorG = random(137, 255);
backgroundColorB = random(175, 255);
eyeWidth = random (30, 40);
eyeHeight = random(15, 30);
pupilWidth = random(1,7);
pupilHeight = random(1,7);
skin = random(1, 150);
lips = random(4);
hair = random(4);
brows = random(4);
cheekColorR = random(220, 255);
cheekColorG = random(180, 255);
cheekColorB = random(139, 255);
}

``````

This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.

## ChristineSeo-Project-02-SectionC

``````// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-02
var xPos;
var yPos;
var xR;
var scale;
var eyeScale;
var curve;
var shirtH;
var shirtW;
var hatR;
var earSize;
var eyeW;
var eyeH;
var earringS;
var mouthH;
var faceS;
var circleG;
var circleB;
var skinR;
var skinG;
var skinB;
var neckR;
var neckG;
var neckB;
var faceWidth = 100;
var faceHeight = 160;
var hairLength= 155;

function setup() {
createCanvas(480, 640);
xPos = random(0,width);
yPos = random(0,height);
xR = random(10,width);
scale=random(10,height);
shirtR=random(10,width);
harR=random(10,width);
eyeScale=random(10,20);
earSize=random(25,45);
curve=20
shirtH=80
shirtW=185
eyeW=140
eyeH=210
earringS=210
mouthH=240
faceS=80
circleG=90;
circleB=80;
skinR=247;
skinG=225;
skinB=200;
neckR=231;
neckG=195;
neckB=156;

}

function draw() {

background(46, 47, 69);
noStroke(0);

//circles
fill(xR,circleG,circleB);
ellipse(xPos, yPos, scale,scale);

//neck
fill(neckR, neckG, neckB);
rect(width/2-80, height/3, faceWidth/2-15, width/4.2, curve/2);

//shirt
fill(shirtR,circleG,circleB);
rect(width/3.84, height/2.1, shirtH, shirtW, curve);

//shoulders
fill(skinR, skinG, skinB);
rect(height/3.5, height/2.2, shirtH-35, shirtW+40, curve);
rect(width/3.84, height/2.1, shirtH-70, shirtW+10, curve);

//hair
fill (141, 114, 41);
ellipse(width/2.91,height/3.6,width/3.2,height/3.8);
rect(height/7, width/2.6, width/7, hairLength);

//ears
fill(neckR, neckG, neckB);
ellipse(width/3.84,earringS,height/18,earSize);

//earring
fill(1);
rect(width/4.5,earringS,earringS/30,earringS/30);

//face
fill (skinR, skinG, skinB);
ellipse(width / 3, height /3, faceWidth,  faceHeight);

//eyes
fill(1);
ellipse(eyeW,eyeH,eyeW/7,eyeScale);
fill(990);
ellipse(eyeW,eyeH,eyeW/17,eyeScale);

//nose
stroke(1);
line(eyeW, eyeH+30, width/2.5, width/3);
line(eyeW,eyeH+30,width/3.2,mouthH);
ellipse(width/3,mouthH,width/160);

//mouth
noStroke(0);
fill(236, 185, 248);
triangle(width/2.5,mouthH,width/2.8,width/2,width/3.2,height/2.5);

//bangs
noStroke(0);
fill(141, 114, 41);
translate(width/-9, height/2.95);
rotate(PI/0.6);

//hat
fill(1);
translate(width/1.6, height/35);
rotate(PI/2);
ellipse(height/4,width/4-3,height/2.5,width/20);
fill(hatR, circleG,circleB);

}
function mousePressed() {

xPos = random(0,width);
yPos = random(0,height);
xR = random(10,width);
scale= random(10,height);
eyeScale= random(10,20);
shirtR= random(10,width);
hatR=random(10,width);
faceWidth = random(75, 100);
faceHeight = random(110, 150);
hairLength = random(120,255);
earSize= random(25,45);

}``````

Although I had difficulties in the beginning of using variables, I was able to find the convenience of them! I experimented with different shapes and sizes. It was great to learn about how much I could play around with the software; it makes everything so much more dynamic!

``````//Elizabeth Maday
//Section A
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 100;
var eyeBrowHeight = 0;
var mouthWidth = 27;
var bodySize = 114;

var a = 3;
var b = 20;
var c = 17;
var d = 15;
var e = 28;

var r = 203;
var g = 129;
var B = 51;

function setup() {
createCanvas(640, 480);
}

function draw() {
background(255, 173, 184);
ellipseMode(CENTER);

//grass
strokeWeight(2);
fill(0, 182, 15);
ellipse(width/2, 480, 900, 250);

//tail
strokeWeight(7);
noFill();
bezier(width/2 + bodySize/4, height/2 + bodySize/1.4, width/2 + bodySize/1.45, height/2 + bodySize/2.1, width/2 + bodySize/1.3, height/2 + bodySize/4.5, width/2 + bodySize/1.3, height/2 - bodySize/6);

//body
strokeWeight(3);
fill(r, g, B);
ellipse(width / 2, 340, bodySize, bodySize);

//front feet
fill(r, g, B);
line(width / 2, 397, width / 2, 368);
line(width / 2 - 15, 397, width / 2 - 15, 368);
line(width / 2 + 15, 397, width / 2 + 15, 368);
arc(width / 2 - 15, 397, 30, 30, PI, 0, CHORD);
arc(width / 2 + 15, 397, 30, 30, PI, 0, CHORD);

//ears
fill(r, g, B);
triangle(width / 2 + (faceWidth * 0.20), height / 2 - (faceHeight * 0.4), width / 2 + (faceWidth * 0.40), height / 2 - (faceWidth * 0.2), width / 2 + (faceWidth * 0.45), height / 2 - (faceHeight * 0.60));
triangle(width / 2 - (faceWidth * 0.20), height / 2 - (faceHeight * 0.4), width / 2 - (faceWidth * 0.40), height / 2 - (faceWidth * 0.2), width / 2 - (faceWidth * 0.45), height / 2 - (faceHeight * 0.60));

fill(r, g, B);
ellipse(width / 2, height / 2, faceWidth, faceHeight);

//stripes
line(width/2, height/2 - faceHeight/2, width/2, height/2 - faceHeight/2.6);
line(width/2 - 8, height/2 - faceHeight/2, width/2 - 8, height/2 - faceHeight/2.45);
line(width/2 + 8, height/2 - faceHeight/2, width/2 + 8, height/2 - faceHeight/2.45);

//eyebrows
line(width/2 + faceWidth/6, height/2 - eyeSize + eyeBrowHeight, width/2 + faceWidth/3.4, height/2 - eyeSize + eyeBrowHeight);
line(width/2 - faceWidth/6, height/2 - eyeSize + eyeBrowHeight, width/2 - faceWidth/3.4, height/2 - eyeSize + eyeBrowHeight);

//eyes
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(255, 255, 255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);

//pupil
fill(0);
ellipse(eyeLX, height / 2, eyeSize / 4, eyeSize / 4);
ellipse(eyeRX, height / 2, eyeSize / 4, eyeSize / 4);

//nose
triangle((width / 2) - a, (height / 2) + c, width / 2, (height / 2) + b, (width / 2) + a, (height / 2) + c);

//whiskers
strokeWeight(2);
line((width / 2) - faceWidth * 0.6, (height / 2) + d, (width / 2) - 9, (height / 2) + 20);
line((width / 2) - faceWidth * 0.6, (height / 2) + e, (width / 2) - 9, (height / 2) + 23);
line((width / 2) + 9, (height / 2) + 20, (width / 2) + faceWidth * 0.6, (height / 2) + d);
line((width / 2) + 9, (height / 2) + 23, (width / 2) + faceWidth * 0.6, (height / 2) + e);

//mouth
ellipseMode(CORNER);
noFill();
arc(width / 2, (height / 2) + b - 13, mouthWidth, mouthWidth, 0, PI);
arc((width / 2) - mouthWidth, (height / 2) + b - 13, mouthWidth, mouthWidth, 0, PI);

//twitching whiskers
if (mouseIsPressed) {
d = 10;
e = 33;
} else {
d = 15;
e = 28;
}
}

function mousePressed() {
faceWidth = random(75, 165);
faceHeight = random(100, 200);
eyeSize = random(10, 40);
mouthWidth = random(18, 34);
bodySize = random(85, 140);
eyeBrowHeight = random(-5, 5);

a = random(1, 5);
b = random(18, 23);
c = random(13, 19);
d = random(10, 15);

r = random(18, 215);
g = random(110, 160);
B = random(35, 265);
}

``````

This project was really fun for me to work on because I had to figure out how to do a lot of new commands. Being successful after working on it for a long time was really satisfying. It was also interesting for me to start using more difficult things to work with such as ‘bezier’.

## Jonathan Liang – Project 02 – Variable Face

``````// Simple beginning template for variable face.
var eyeSize = 30;
var eyeHeight = 2.5 * eyeSize;
var eyeWidth = 2 * eyeSize;
var faceWidth = 300;
var faceHeight = 300;
var canvasWidth = 640;
var canvasHeight = 480;
var pupilWidth = 10;
var pupilHeight = 15;
var mouthStroke = 3;
var llWall = canvasWidth / 2 - eyeSize - pupilWidth;
var lrWall = canvasWidth / 2 - eyeSize + pupilWidth;
var rlWall = canvasWidth / 2 + eyeSize - pupilWidth;
var rrWall = canvasWidth / 2 + eyeSize + pupilWidth;
var tlWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var blWall = canvasHeight / 2 - eyeSize * 3 + eyeSize;
var trWall = canvasHeight / 2 - eyeSize * 3 - eyeSize;
var brlWall = canvasHeight / 2 - eyeSize * 3 +  eyeSize;
var mouthStart = 320;
var noseSize = eyeSize
var backgroundColor = 1;

function setup() {
createCanvas(640, 480);
}

function draw() {
switch(backgroundColor){
case 1:
background('pink');
break;
case 2:
background('lime');
break;
case 3:
background(71, 170, 215);
break;
case 4:
background('magenta');
break;
case 5:
background('cyan');
break;
case 6:
background('orange')
break;
case 7:
background(237,204, 248);
break;
case 8:
background('yellow');
break;
}

noStroke();
case 1:
fill(71, 170, 215);
break;
case 2:
fill('yellow');
break;
case 3:
fill('lime');
break;
case 4:
fill('red');
break;
case 5:
fill('orange');
break;

}
strokeWeight(3);
ellipse(canvasWidth / 2, canvasHeight / 2, faceWidth, faceHeight);

//white fills on face
noStroke();
fill('white');
ellipse(canvasWidth / 2, canvasHeight / 2 + eyeSize, faceWidth/1.25, faceHeight/1.25);

//eyes
ellipse(canvasWidth / 2 - eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);
ellipse(canvasWidth / 2 + eyeSize, canvasHeight / 2 - eyeSize * 3, 2 * eyeSize, 2.5 * eyeSize);

//pupils
var xrL = constrain(mouseX, llWall, lrWall);
var xrR = constrain(mouseX, rlWall, rrWall);
var yrL = constrain(mouseY, tlWall, blWall);
var yrR = constrain(mouseY, trWall, brlWall);

noStroke();
fill('black');
ellipse(xrL, yrL, pupilWidth, pupilHeight);
ellipse(xrR, yrR, pupilWidth, pupilHeight);

//mouth
noFill();
stroke('black');
strokeWeight(mouthStroke);
line(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2, mouthStart);
arc(canvasWidth / 2, mouthStart - faceWidth / 4, faceWidth * 0.65, faceWidth * 0.5, 0, PI, OPEN);

//left whiskers
line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight);
line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
line(canvasWidth / 2 - 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 - noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);

//right whiskers
line(canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight, canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6);
line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 2);
line(canvasWidth / 2 + 1.75 * eyeWidth, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 4, canvasWidth / 2 + noseSize, canvasHeight / 2 - eyeSize * 1.6 + pupilHeight * 3);

//nose and highlight
noStroke();
fill('red');
ellipse(canvasWidth / 2, canvasHeight / 2 - eyeSize * 1.6, noseSize, noseSize);

noStroke();
fill('white');
ellipse(canvasWidth / 2 - 1, canvasHeight / 2 - eyeSize * 1.63, pupilWidth, pupilWidth);

}

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(10, 250);
faceHeight = random(150, 250);
eyeSize = random(10, 40);
noseSize = random(10, 70);
backgroundColor = int(random(1,8));

}
``````

As a child, one of my favorite cartoons was Doraemon. I always wondered if there were more to the Doraemon family and if they were in different colors. I also took inspiration from a scene in Guardians of the Galaxy volume 2, I’m not gonna specify which scene.

## Kevin Thies – Variable Face

``````//Kevin Thies
//Section C
//kthies@andrew.cmu.edu
//Project-02

// Core Variables
var noseHeight = headHeight * 2.5; // relates proportion of head to  nose
var noseAngle = -4;

var skinR = 221; // color values for skin and background
var skinG = 203;
var skinB = 161;

var backR = 25; // background color offset from skin color values
var backG = 25; // additionally used to offset eye color
var backB = 25; // so the colors all harmonize

var eyeOffset = 50; // setback from head width
var eyeWidth = headWidth/2 - eyeOffset; // eye position
var eyeTop = 3;
var eyeBottom = 3.5;
var pupilRatio = .8; // ratio of eye white to black
var irisRatio = 1.4; // ratio of eye black to color

function setup() {
createCanvas(480,640);
}

function draw() {

// Background that
background(skinR + backR, skinG + backG, skinB + backB);

// Nose, sometimes it looks more like a nose and that's ok
noStroke();
fill(skinR, skinG, skinB);
arc(width/2, height/3, headWidth, noseHeight, noseAngle, 0, CHORD);

// Hide the top half of nose generated
fill(skinR + backR, skinG + backG, skinB + backB);
rect(0,0, width, height/3);

fill(skinR, skinG, skinB);

// Nose

// Eyes
// Pupil
fill(0);
arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth,
eyeHeight, eyeTop, eyeBottom, PIE);
// Iris
fill(skinR - backR, skinG - backG, skinB - backB);
arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio * irisRatio,
eyeHeight * pupilRatio * irisRatio, eyeTop, eyeBottom, PIE);
// White
fill(255);
arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio,
eyeHeight * pupilRatio, eyeTop, eyeBottom, PIE);

}

function mousePressed() {

noseHeight = headHeight * random(2, 3);
noseAngle = -random(3.66, 4); //radian angle of  arc

//Change eye color and Shape
eyeOffset = random(45, 60);
eyeTop = random(2.61, 3.14); // 5/6 Pi to Pi
eyeBottom = random(3.14, 3.66); //Pi to 7/6 pi
pupilRatio = random(.75, .5);
irisRatio = random(1.2, 1.3);

// Constrain face color to less saturated, darker values
skinR = random(140, 225);
skinG = random(143, 225);
skinB = random(140, 184);

// Reshuffle background color offset
backR = random(-50, 25);
backG = random(-50, 25);
backB = random(-50, 25);
}
``````

There was a lot of math involved in this one. If I could go back in time, I think bezier curves would’ve been a better fit than arcs simply based on the parameters they use. At the same time, since I used arcs, the end product morphed into what it is now instead of more ‘realistic’ shapes.

## Project 02 – Variable Face – Sara Frankel

``````var eyeSize = 60;
var faceWidth = 300;
var faceHeight = 350;
var value = 'blue';

function setup() {
createCanvas(640, 480);
}

function draw() {
background(141,209,247);
if (mouseX < width/2)
background(51);

fill(77,47,23);
arc(width / 2, height / 3 + 0.75 * faceHeight, faceWidth * 1.5 , faceHeight * 2.3, PI, TWO_PI);
fill('tan');
ellipse(width / 2,height / 2,faceWidth,faceHeight);
fill(77,47,23)
arc(width / 2, height / 3, faceWidth * 0.9 , faceHeight * 0.6, PI, TWO_PI);

//left eye
fill('white');
var eyeLX = width / 2 - faceWidth * 0.25;
ellipse(eyeLX, height / 2, 1.5 * eyeSize, eyeSize);

//left eyeball (blue iris, black pupil and white glissen)
fill(value);
ellipse(eyeLX + 15, height / 2, 0.5 * eyeSize, 0.5 * eyeSize);
fill(51);
ellipse(eyeLX + 15, height / 2, 0.25 * eyeSize, 0.25 * eyeSize);
fill('white');
ellipse(eyeLX + 10, height / 2, eyeSize / 8, eyeSize / 8);

//right eye
fill('white');
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeRX, height / 2, 1.5 * eyeSize, eyeSize);

//right eyeball (blue iris, black pupil and white glissen)
fill(value);
ellipse(eyeRX + 15, height / 2, eyeSize / 2, eyeSize /2);
fill(51);
ellipse(eyeRX + 15, height / 2, eyeSize / 4, eyeSize /4);
fill('white');
ellipse(eyeRX + 10, height / 2, eyeSize / 8, eyeSize / 8);

//eyebrows (left then right)
fill(77,47,23);
ellipse(eyeLX, height / 2 - 30 , eyeSize * 1.5, eyeSize / 6);
ellipse(eyeRX, height / 2 - 30, eyeSize * 1.5, eyeSize / 6);

//mouth
noFill();
arc(width / 2, height * 0.66, faceWidth / 4, faceHeight  / 4, 0, PI);

}

function mouseClicked() {
if(value === 0) {
value = 'blue';
} else {
value = color(random(0,255), random(0,255), random(0,255));
}

}

function mousePressed() {
faceWidth = random(200, 350);
faceHeight = random(325, 350);
eyeSize = random(35, 50);
}

``````

I really enjoyed this project as I felt that I now have a better understanding of how to use a lot of the code that was established last week and cool new functions introduced this week. I also enjoyed this project in the sense that it was kind of entertaining to play with and trying to understand the ratio of canvas and face features using established values and ratios.

## Julie Choi-Project-02-Variable-Face

``````// declare character variables
var faceWidth = 130;
var faceHeight = 150;
var eyeSize = 25;
var pupilSize = 10;
var mouthSize = 25;
var tongueSize = 20;
var bodySize = 160;
var legSize = 20;
var blushSize = 20;

// declare other object variable
var discoSize = 85;

// declare color variables
var r = 0;
var g = 0;
var b = 0;
var skinColor1 = 249;
var skinColor2 = 205;
var skinColor3 = 161;
var colorA = 0;
var colorB = 0;
var colorC = 0;

function setup() {
createCanvas(640,480);
}
function draw() {
// draw background
background(r, g, b);

// draw face + body + legs
noStroke();
fill(skinColor1, skinColor2, skinColor3);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
fill(249, 205, 161);
noStroke();
fill(skinColor1, skinColor2, skinColor3);
ellipse(width / 2, height / 2 + 100, bodySize, bodySize);
fill(249, 205, 161);
noStroke();
fill(skinColor1, skinColor2, skinColor3);
ellipse(width / 1.8, height / 1.15, legSize / 1.9, legSize + 30);
noStroke();
ellipse(width / 2.2, height / 1.15, legSize / 1.9, legSize + 30);

// declare eye variables
var eyeLeft = width / 2 - faceWidth * 0.25;
var eyeRight = width / 2 + faceWidth * 0.25;
var pupilLeft = width / 2 - faceWidth * 0.25;
var pupilRight = width / 2 + faceWidth * 0.25;

// draw eyes + pupil
fill(255);
ellipse(eyeRight, height / 2.25, eyeSize, eyeSize);
ellipse(eyeLeft, height / 2.25, eyeSize, eyeSize);

fill(0);
ellipse(pupilRight, height / 2.2, pupilSize, pupilSize);
ellipse(pupilLeft, height / 2.2, pupilSize,pupilSize);

// draw nose with curveVertex
strokeWeight(1);
stroke(255);
noFill(0);
beginShape();
curveVertex(width / 1.95, height / 2.3);
curveVertex(width / 1.95, height / 2.3);
curveVertex(width / 1.94, height/ 2.1);
curveVertex(width / 1.9, height/ 2);
curveVertex(width / 2, height / 2);
curveVertex(width / 2, height / 2);
endShape();

// draw hair strand with curveVertex
strokeWeight(3);
stroke('brown');
noFill(0); //320, 240
beginShape();
curveVertex(323, 170);
curveVertex(323, 170);
curveVertex(320, 166);
curveVertex(325, 159);
curveVertex(323, 153);
curveVertex(326, 148);
curveVertex(322, 142);
curveVertex(324, 135);
curveVertex(324, 135);
endShape();

// draw mouth
colorA = 243;
colorB = 159;
colorC = 76;

noStroke();
fill(colorA, colorB, colorB);
ellipse(width / 2, height / 2 + 20, mouthSize + 5, mouthSize / 2 + 5);

fill(colorA, colorC, colorC);
//strokeWeight(5);
//fillStroke(243, 159, 159);
ellipse(width / 2, height / 2 + 20, mouthSize + 2, mouthSize / 1.9);

// draw tongue
noStroke();
fill(colorA, colorC, colorC);
ellipse(width / 2, height / 2 + 25, tongueSize / 1.8, tongueSize + 3);

// draw blush
fill('pink');
strokeWeight(1);
stroke(255, 255, 255, 50);
ellipse(width / 2.4, height / 2 + 10, blushSize * 2, blushSize);

strokeWeight(1);
stroke(255, 255, 255, 50);
ellipse(width / 1.7, height / 2 + 10, blushSize * 2, blushSize);

//draw disco ball shape
noStroke();
fill(150);
rect(315, 0, 15, 25);
quad(315, 25, 330, 25, 335, 35, 310, 35);
ellipse(width / 1.99, height / 6.5, discoSize, discoSize);

fill(0);
ellipse(307, 52, 15, 15);
ellipse(327, 72, 15, 15);

fill(0);
ellipse(345, 60, 15, 15);
ellipse(319, 100, 15, 15);

fill(0);
ellipse(298, 78, 15, 15);
ellipse(343, 88, 15, 15);

fill(243, 36, 202); //pink
ellipse(305, 50, 15, 15);
ellipse(325, 70, 15, 15);

fill(24, 138, 255); //blue
ellipse(347, 60, 15, 15);
ellipse(321, 100, 15, 15);

fill(255, 255, 24); //yellow
ellipse(300, 80, 15, 15);
ellipse(345, 90, 15, 15);
}

function mousePressed() {
faceWidth = random(150, 250);
faceHeight = random(150, 200);
eyeSize = random(10, 40);
pupilSize = random(5, 10);
mouthSize = random(20, 28);
tongueSize = random(15, 18);
bodySize = random(160,200);
blushSize = random(15,20)
colorA = random(0, 255);
colorB = random(0, 255);
colorC = random(0, 255);
skinColor1 = random(0, 255);
skinColor2 = random(0, 255);
skinColor3 = random(0, 255);
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
}

``````

For this project, I personally had so much fun using all the new materials from this week. I ended up creating a character in a rave with randomized expression and color. I was able to figure out that when I randomize the color under the draw function, the background changes extremely quickly since the draw function is in a loop. Although applying that part looks more like a rave, I didn’t apply it to my code for this post because it might hurt some people’s eyes. Instead, if you are curious, download this: real_rave  to see how it looks. I hope you enjoy!

## Kyle Leve – Project 02 – Variable Face

``````//Kyle Leve
//Section A
//kleve@andrew.cmu.edu
//Project-02-Variable Faces

var glassesWidth = 8;
var glassesHeight = 8;
var faceWidth = 350;
var faceHeight = 350;
var eyeSize = 50;
var irisSize = 30;
var pupilSize = 15;
var glimmerSize = 7;
var backgroundColor;

function setup() {
createCanvas(640, 480);
var red; random(50, 250);
var green; random(100, 250);
var blue; random(20, 250);
backgroundColor = color(red, green, blue);
}

function draw() {
background(backgroundColor);

//face
noStroke();
fill('tan');
ellipse(width / 2, height / 2, faceWidth, faceHeight);

//eyes
fill('white'); //left eyeball
var eyeLX = width / 2 - faceWidth * 0.25;
ellipse(eyeLX + 10, height / 2 + 15, eyeSize, eyeSize);

fill('white'); //right eyeball
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeRX - 30, height / 2 + 15, eyeSize, eyeSize);

fill(77,47,23); //left iris
ellipse(eyeLX + 15, height / 2 + 20, irisSize, irisSize);

fill(77,47,23); //right iris
ellipse(eyeRX - 25, height / 2 + 20, irisSize, irisSize);

fill('black'); //left pupil
ellipse(eyeLX + 20, height / 2 + 25, pupilSize, pupilSize);

fill('black'); //right pupil
ellipse(eyeRX - 20, height / 2 + 25, pupilSize, pupilSize);

fill('white'); //left eye shimmer
ellipse(eyeLX + 25, height / 2 + 22, glimmerSize, glimmerSize);

fill('white'); //right eye shimmer
ellipse(eyeRX - 15, height / 2 + 22, glimmerSize, glimmerSize);

//Glasses
fill('black');
rect(280, 250, 40, glassesHeight);

fill('black');
rect(280, 210, glassesWidth, 80);

fill('black');
rect(180, 210, 100, glassesHeight);

fill('black');
rect(180, 285, 108, glassesHeight);

fill('black');
rect(180, 210, glassesWidth, 75);

fill('black');
rect(155, 247, 30, glassesHeight);

fill('black');
rect(315, 210, glassesWidth, 80);

fill('black');
rect(315, 210, 100, glassesHeight);

fill('black');
rect(315, 285, 108, glassesHeight);

fill('black');
rect(415, 210, glassesWidth, 75);

fill('black');
rect(415, 247, 28, glassesHeight);
}

function mousePressed() {
faceWidth = random(300, 400);
faceHeight = random(250, 350);
glassesWidth = random(5, 15);
glassesHeight = random(5, 15);
eyeSize = random(40, 60);
irisSize = random(25, 35);
pupilSize = random(10, 20);
glimmerSize = random(7, 10);
var red = random(50, 250);
var green = random(100, 250);
var blue = random(20, 250);
backgroundColor = color(red, green, blue);
}
``````

I found this project to be very interesting in that for me it started out with me knowing exactly what I wanted to do, but having no idea how to do it. Through trial-and-error I found out how to change dimensions and colors randomly by using variables to make an interactive project. This project has taught me how to use variables effectively to make my projects more fun and interesting.