## Yingying Yan Project-02-Variable-Face

I was just trying things out. Every time I run the code, something funny pops up, so I decided to do weird, ugly, and funny faces. I had a lot of fun playing with this.

``````//variables layout
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var num = 4;
var num2 = 6;
var numNose = 8;
var mouthX = 30;
var mouthY = 50;
var Red = 100;
var earX = 10;
var earY = 20;
var color = 254

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

function draw() {
background(223,240,230);

//ears
fill (6,167,181);
var earLX = width / 2 - faceWidth / 2;
var earRX = width / 2 + faceWidth / 2;
ellipse(earLX, height / 2, earX, earY);
ellipse(earRX, height / 2, earX, earY);

//face, changes shape
fill (color,192,79);

if (faceWidth > 250) {
faceShape = ellipse (width / 2, height / 2, faceWidth, faceHeight);
} else {
faceShape = rect(width / 2 - faceWidth / 2 , height / 2 - faceHeight / 2, faceWidth,  faceHeight);
}

//eyes, changes size
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
var eyeY = height / 2 - faceWidth * 0.12;
ellipse(eyeLX, eyeY, eyeSize, eyeSize + num);
ellipse(eyeRX, eyeY, eyeSize, eyeSize + num);

//pupils, always inside the eyes
fill(0);
ellipse(eyeLX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);
ellipse(eyeRX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);

//mouth
fill(233,111,41);
var RectX = width / 2 - mouthX / 2;
rect(RectX + num2, height/2 + 15, mouthX, mouthY);

//tongue, changes color and move in relationship to the mouth
fill (Red, 20, 40);
rect(RectX + num2, height/2 + 15 + 2 * mouthY / 3, mouthX, mouthY / 3);

//teeth changes x according to the mouth
fill(250);
rect(RectX + num2 +10, height/2 + 15, 5, 10);
rect(RectX + num2 +20, height/2 + 15, 5, 10);

//nose, changes how long the nose is
fill (19,71,125);
triangle(width / 2 - 4, height / 2 + 4, width / 2 + 4, height / 2 + 4, width / 2, height / 2 - numNose);

}

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, 350);
faceHeight = random(200, 350);
eyeSize = random(10, 50);
num = random(-5, 5);
num2 = random(0,5);
numNose = random(10, 60);
mouthX = random(40, 60);
mouthY = random(30, 60);
Red = random(90, 250);
earX = random(15, 100);
earY = random(40, 80);
color = random(200,250);
}``````

## Sophie Chen – Project 02 – Variable Face

``````var faceSize = 210;
var eyeType = 2;
var noseShape = 1;
var earShape = 1;
var mouthType = 1;
var colorG = 103;
var colorB = 135

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

}

function draw() {
background(189, 200, 234);
fill(255, colorG-30, colorB-40);
ellipse(width / 2, height / 2, faceSize, faceSize);
fill(245, 155, colorG, 80);
arc(width / 2, height / 2, faceSize, faceSize, PI, TWO_PI);

//eyes
if (eyeType == 1){
fill(0);
noStroke();
var eyeLX = width/2-faceSize*0.15;
var eyeRX = width/2+faceSize*0.15;
ellipse(eyeLX, height/2, 10, 10);
ellipse(eyeRX, height/2, 10, 10);
fill(255, 255, 255);
ellipse(eyeLX + 3, height/2 - 1, 3, 3);
ellipse(eyeRX + 3, height/2 - 1, 3, 3);
} else if (eyeType == 2){
fill(0);
noStroke();
var eyeLX = width/2-faceSize*0.15;
var eyeRX = width/2+faceSize*0.15;
rect(eyeLX, height/2, 12, 10);
rect(eyeRX, height/2, 12, 10);
strokeWeight(2);
stroke(0);
fill(0);
line(eyeLX+1, height/2, eyeLX, height/2-3);
line(eyeLX+4, height/2, eyeLX+3, height/2-3);
line(eyeRX+1, height/2, eyeRX, height/2-3);
line(eyeRX+4, height/2, eyeRX+3, height/2-3);

} else if (eyeType == 3){
fill(0);
stroke(255, 255, 255);
strokeWeight(2);
var eyeLX = width/2-faceSize*0.15;
var eyeRX = width/2+faceSize*0.15;
ellipse(eyeLX, height/2, 20, 20);
ellipse(eyeRX, height/2, 20, 20);
}

//nose
if (noseShape == 1){
fill(230, 223, 255);
noStroke();
ellipse(width / 2, height / 2 + 3, 20, 15);
} else if (noseShape == 2){
fill(255, 255, 184);
noStroke();
triangle(width / 2 - 10, height / 2 + 3, width / 2 + 10, height / 2 + 3, width / 2, height / 2 + 13);
}

//ears
if (earShape == 1){
strokeWeight(7);
stroke(155, 245, 204);
fill(155, 255, 234);
line(240, 250, 240, 190);
ellipse(width/2+50, 205, faceSize/2.5, faceSize/5);

} else if (earShape == 2){
stroke(255, colorG, colorB);
strokeWeight(20);
fill(250, colorG-20, colorB-10);
ellipse(190, 205, faceSize/5, faceSize/1.7);
ellipse(290, 205, faceSize/5, faceSize/1.7);
}

//mouth
if (mouthType == 1){
noFill();
stroke(140, colorG, 230);
strokeWeight(3);
arc(width/2 - 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
arc(width/2 + 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
} else if (mouthType == 2){
noFill();
stroke(140, colorG, 230);
strokeWeight(3);
arc(width/2, height/1.9, faceSize/12, faceSize/12, TWO_PI, PI);
}

//cheeks
fill(245, 245, 245);
noStroke();
ellipse(300, 345, faceSize / 42, faceSize / 42);
ellipse(290, 355, faceSize / 42, faceSize / 42);
ellipse(280, 345, faceSize / 42, faceSize / 42);
ellipse(185, 345, faceSize / 42, faceSize / 42);
ellipse(175, 355, faceSize / 42, faceSize / 42);
ellipse(170, 345, faceSize / 42, faceSize / 42);

}

function mousePressed() {
faceSize = random(160, 240);
eyeType = int(random(1, 4));
colorG = random(150, 245);
colorB = random(150, 225);
noseShape = int(random(1,3));
earShape = int(random(1,3));
mouthType = int(random(1,3));
}``````

I found this a lot more challenging than the last project, but I really enjoyed the process and I think I improved a lot through this assignment. The hardest part for me was the ears, and I decided to make it into a little stem so the face can into an apple/orange and a bunny which worked out well. I tried to incorporate curve vertex into this but unfortunately it didn’t work out, hopefully I will have a better grasp next week.

## yinjiet-Project-02-Variable-Face

In this exercise, I tried to present a life cycle from  young age to old. The three aspects of variability are the color of the hair, movement of the ears, and the size of the face.

``````//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01

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

}
var x1 = 175;
var y1 = 320;
var x2 = 425;
var y2 = 320;
var count = 0;
var eyecolor = 0;
var facew = 250;
function draw() {
background(220);
strokeWeight(1);
stroke(0, 0, 0);
fill(236, 212, 190);
ellipse(x2, y1, 25, 50);
ellipse(x1, y1, 25, 50);

strokeWeight(0);
stroke(0, 0, 0);
fill(236, 212, 190);
rect(270, 460, 60, 60),

strokeWeight(0);
stroke(0, 0, 0);
fill(236, 212, 190);
ellipse(300, 320, facew, 300);

fill(eyecolor)
quad(175, 270, 280, 270, 308, 160, 210, 185);
quad(320, 270, 425, 270, 390, 185, 292, 160);

strokeWeight(4);
stroke(212, 175, 55);
fill(255);
rect(200, 275, 80, 60);
rect(320, 275, 80, 60);
line(280, 300, 320, 300);
line(175, 285, 200, 300);
line(425, 285, 400, 300);

strokeWeight(1);
stroke(0, 0, 0);
fill(236, 212, 190);
triangle(300, 350, 290, 375, 310, 375);

strokeWeight(1);
stroke(0, 0, 0);
noFill();
arc(300, 415, 80, 80, 0, PI + QUARTER_PI, OPEN);

stroke(0, 0, 0);
fill(0, 0, 0);
quad(200, 520, 400, 520, 500, 600, 100, 600);

stroke(0, 0, 0);
fill(51);
rect(200, 580, 80, 100);

}
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.
if(count % 2 == 0){
y1 -= 10;
}else{
y1 += 10;
}
eyecolor += 15;
eyecolor = eyecolor % 255
count += 1;
facew -= 5;
// x1 = x1 - 5;
// x2 = x2 + 5;

}
``````

## Xiaoying Meng- Project 2- Variable Faces

``````var earSize = 80;
var faceWidth = 300;
var faceHeight = 155;
var blushSize = 90;
var eyeSize =70;
var mouthHeight=122;
var y = 179;

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

function draw() {
background(0,0,0);
var earLX = width / 2 - faceWidth /2;
var earRX = width / 2 + faceWidth /2;

//ears
fill(0,0,0);
stroke(255,255,255);
strokeWeight(6);
ellipse(earLX, 180, earSize, earSize);
ellipse(earRX, 180, earSize, earSize);

//insideear
fill(255,255,255);
noStroke();
ellipse(earLX, 180, earSize/2, earSize/2);
ellipse(earRX, 180, earSize/2, earSize/2);

stroke(255,255,255);
strokeWeight(6);
fill(0,0,0);
beginShape();
curveVertex(87, 480); // the first control point
curveVertex(87, 480); // is also the start point of curve
curveVertex(115, 410);
curveVertex(earLX, 200);
curveVertex(width/2, faceHeight);
curveVertex(earRX, 200);
curveVertex(525, 410);
curveVertex(553, 480);// the last point of curve
curveVertex(553, 480); // is also the last control point
endShape();
//mouth
fill(255,255,255);
noStroke();
var mouthY = height-faceHeight+faceHeight/3;
ellipse(width/2,mouthY,170,mouthHeight);

//blush
fill(228,31,41);
noStroke();
ellipse(earLX-5,mouthY-5, blushSize,blushSize);
ellipse(earRX+5, mouthY-5,blushSize,blushSize);

//eyes
fill(255,255,255);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize,eyeSize);
ellipse(width/2+80,mouthY-100,eyeSize,eyeSize);

//insideeyes
fill(0,0,0);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize/3,eyeSize/3);
ellipse(width/2+80,mouthY-100,eyeSize/3,eyeSize/3);

//nose
var noseY =mouthY-mouthHeight/2+10;
quad(width/2, noseY, width/2+20, noseY+10, width/2, noseY+30,width/2-20, noseY+10);

//mouthinside
ellipse(width/2,mouthY+25,mouthHeight/5,mouthHeight/3);

//eyebrows
stroke(255,255,255);
noFill();
strokeWeight(6);
arc(width/2-80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
arc(width/2+80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
}

function mousePressed(){
faceWidth = random(280, 310);
faceHeight = random(140, 160);
earSize = random(50, 90);
blushSize = random(0,110);
eyeSize =random(60,90);
mouthHeight = random(100,130);
y =random(150,180);
}``````

I first found a picture of Kumamon online and follow the basic shapes of its features. It’s a very interesting project for me. I started by locating the head, using three points on the top as variables. And go from there to describe its other features.

# Variable Face

``````/*Sean McGadden
Section C @ 1:30
project - 02 */

//Variable Face

//Simple
var width = 640
var height = 480

//Face
var faceWidth = 200;
var faceHeight = 300;
var faceR = 65
var faceG = 82
var faceB = 244

//Eyes
var eyeSize = 20;
var eyeR = 244
var eyeG = 211
var eyeB = 65

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

function draw() {
background(66, 244, 143);

//Face
fill(faceR, faceG, faceB)
rect(width / 3, height / 3, faceWidth,            faceHeight);

//Eyes
fill (eyeR, eyeG, eyeB)
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}

function mousePressed() {

//clicking changes position, color and size of face and eyes.
faceWidth = random(150, 300);
faceHeight = random(200, 300);
width = random (500, 640)
height = random (400, 480)
eyeSize = random(10, 40);
eyeR = random(148, 244)
eyeG = random(65, 211)
eyeB = random(65, 244)
faceR = random(62, 65)
faceG = random(65, 82)
faceB = random(91, 244)
}
``````

The variable face was very interesting to play around with. Although I took few risks in my sketch I feel I learned a lot more about variables and their implementation. I want to make more intricate interactive pieces in future projects. My project makes computational changes in color, size and position of the face and eyes. Using RGB and canvas coordinate randomization with a few variables, I was able to explore further how faces can be differently perceived even with only small changes.

Here is an original concept sketch that I was unsuccessful in replicating after some attempts.

September 7 2018

## Joanne Lee – Project 02

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-02
var eyeType = 1;
var face = 250;
var eyeY = (320+(320-0.15*face))/2;
var brow = 1;
var browY1 = eyeY-0.10*face;
var browY2 = eyeY-0.10*face;
var browStroke = 8;
var stacheR = 255;
var stacheG = 255;
var stacheB = 255;

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

function draw() {
background (254, 203, 212);
var rightEyeX = (240+(240+0.3*face))/2;
var leftEyeX = (240+(240-0.3*face))/2;
var eyeColor = "rgb(0,0,0)";
var curveAnchorY = (eyeY+0.05*face)+50;

// ears
var rightEarX = 240-0.33*face;
var leftEarX = 240+0.33*face;
var earY = 320-0.32*face;
var earSize = 70;

strokeWeight(5);
stroke(0);
fill(223,155,58);
//right brow
ellipse(rightEarX,earY,earSize,earSize);
//left brow
ellipse(leftEarX,earY,earSize,earSize);

// face
ellipse(240,320,face,0.85*face);

// eyebrows
var leftBrowX1 = leftEyeX-0.09*face;
var leftBrowX2 = leftEyeX+0.07*face;
var rightBrowX1 = rightEyeX-0.07*face;
var rightBrowX2 = rightEyeX+0.09*face;

strokeWeight(browStroke);
//left brow
line(leftBrowX1,browY1,leftBrowX2,browY2);
//right brow
line(rightBrowX1,browY2,rightBrowX2,browY1);

// eyes
strokeWeight(0);
fill(eyeColor);
if (eyeType == 1) { // circle eyes
var eye1Size = 0.06*face;

// right eye
ellipse(rightEyeX,eyeY,eye1Size,eye1Size);
// left eye
ellipse(leftEyeX,eyeY,eye1Size,eye1Size);
}
else if (eyeType == 2) { // oval eyes
var eye2SizeW = 0.06*face;
var eye2SizeH = 0.12*face;

// right eye
ellipse(rightEyeX,eyeY,eye2SizeW,eye2SizeH);
// left eye
ellipse(leftEyeX,eyeY,eye2SizeW,eye2SizeH);
}
else if (eyeType == 3) { // laughing eyes
var leftEyeX1 = leftEyeX-0.04*face;
var leftEyeX2 = leftEyeX+0.04*face;
var leftEyeY1 = eyeY-0.03*face;
var leftEyeY2 = eyeY+0.03*face;
var rightEyeX1 = rightEyeX+0.04*face;
var rightEyeX2 = rightEyeX-0.04*face;
var rightEyeY1 = eyeY-0.03*face;
var rightEyeY2 = eyeY+0.03*face;

stroke(eyeColor);
strokeWeight(8);

// left eye
line(leftEyeX1,leftEyeY1,leftEyeX2,eyeY);
line(leftEyeX2,eyeY,leftEyeX1,leftEyeY2);
// right eye
line(rightEyeX1,rightEyeY1,rightEyeX2,eyeY);
line(rightEyeX2,eyeY,rightEyeX1,rightEyeY2);
}
else if (eyeType == 4) { // dead eyes
var leftEyeX1 = leftEyeX-0.05*face;
var leftEyeX2 = leftEyeX+0.05*face;
var leftEyeY1 = eyeY-0.04*face;
var leftEyeY2 = eyeY+0.04*face;
var rightEyeX1 = rightEyeX-0.05*face;
var rightEyeX2 = rightEyeX+0.05*face;
var rightEyeY1 = eyeY-0.04*face;
var rightEyeY2 = eyeY+0.04*face;

stroke(eyeColor);
strokeWeight(8);

// left eye
line(leftEyeX1,leftEyeY1,leftEyeX2,leftEyeY2);
line(leftEyeX2,leftEyeY1,leftEyeX1,leftEyeY2);
// right eye
line(rightEyeX1,rightEyeY1,rightEyeX2,rightEyeY2);
line(rightEyeX2,rightEyeY1,rightEyeX1,rightEyeY2);

}

// nose
var noseX = 240;
var noseY = 320+0.05*face;
var noseSize = 0.1*face;
ellipse(noseX,noseY,noseSize,noseSize);

// mustache
var leftStacheX = noseX-0.07*face;
var rightStacheX = noseX+0.07*face;
var stacheY = noseY+0.06*face;
var stacheSizeW = 1.7*noseSize;
var stacheSizeH = 1.4*noseSize;

strokeWeight(0);
fill(stacheR,stacheG,stacheB);
//left stache
ellipse(leftStacheX,stacheY,stacheSizeW,stacheSizeH);
//right stache
ellipse(rightStacheX,stacheY,stacheSizeW,stacheSizeH);
}

function mousePressed() {
face = random(250,400)
eyeType = int(random(1,5));
browStroke = random(4,10);
brow = int(random(1,3));
if (brow == 1) { // concerned brows
browY1 = eyeY-0.10*face;
browY2 = random(250,260);
}
else { // angry brows
browY2 = eyeY-0.10*face;
browY1 = random(250,260);
}
stacheR = random(200,255);
stacheG = random(100,255);
stacheB = random(150,255);
}``````

At first, I planned to do variable faces regarding iPhone emojis. However, I decided to hone in more on my favorite emoji — KakaoTalk’s character, Ryan. My variable starts off as the traditional character’s face and then varies. I was curious if the character would still be noticeable with different features and emotions.

## Category Project-02-Variable-Face

``````//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//project-02-Variable-Face

var body_width = 240;
var body_height = 250;
var face_width = 190;
var face_height = 200;
var eye_w = 35;
var eye_h = 0;
var beak_w = 20;
var beak_h = 20;
var beak_dir = 2;
var brow_outer_h = 110;
var brow_inner_h = 100;
var brow_width = 5;
var flipper_right_angle = 0;
var flipper_left_angle = (10/9);
var button_unit = 20;

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

function draw() {
background(61, 247, 247);
noStroke();

//black parts of body
fill(0, 0, 0);
ellipse(320, 270, body_width, body_height);
ellipse(320, 150, face_width, face_height);

//flippers
fill(0, 0, 0);
if(flipper_right_angle < 0){
flipper_right_angle = (2+flipper_right_angle);
}
arc(350, 270, 350, 350, flipper_right_angle*PI, (flipper_right_angle*PI)+(PI/16));
arc(290, 270, 350, 350, flipper_left_angle*PI, (flipper_left_angle*PI)+(PI/16));

//white parts of body
fill(255, 255, 255);
ellipse(320, 270, body_width-60, body_height-50);
ellipse(320-(face_width/6), 150, face_width/3, face_height*3/5);
ellipse(320+(face_width/6), 150, face_width/3, face_height*3/5);
rect(300, 150, 60, 40);

//feet
fill(255, 181, 102);
ellipse(320-(body_width/5), 270+body_height/2, 60, 30);
ellipse(320+(body_width/5), 270+body_height/2, 60, 30);

//eyes
fill(0, 0, 0);
ellipse(320-(face_width/6), 140, 30, 30);
ellipse(320+(face_width/6), 140, 30, 30);
fill(255, 255, 255);
ellipse(320-(face_width/6), 150, 40, 20)
ellipse(320-(face_width/6), 140, eye_w, eye_h)
ellipse(320+(face_width/6), 150, 40, 20)
ellipse(320+(face_width/6), 140, eye_w, eye_h)

//blush
fill(255, 170, 170);
ellipse(320-(face_width/6), 150, 20, 15);
ellipse(320+(face_width/6), 150, 20, 15);

//beak
fill(255, 181, 102);
if(beak_dir <= 1){
beak_dir = 2;
beak_w = -beak_w;
}
triangle(320, 150, 320, 150+beak_h, 320+beak_w, 150+(beak_h/2))

//eyebrows
fill(0, 0, 0);
quad(320-(face_width/6)-15, brow_outer_h, 320-(face_width/6)+15, brow_inner_h, 320-(face_width/6)+15, brow_inner_h+brow_width,
320-(face_width/6)-15, brow_outer_h+brow_width);
quad(320+(face_width/6)-15, brow_inner_h, 320+(face_width/6)+15, brow_outer_h, 320+(face_width/6)+15, brow_outer_h+brow_width,
320+(face_width/6)-15, brow_inner_h+brow_width);

//buttons
fill(0, 0, 0);
ellipse(320, 230, button_unit, button_unit);
ellipse(320, 270, button_unit, button_unit);
ellipse(320, 310, button_unit, button_unit);

//whites inside the buttons
fill(255, 255, 255);
ellipse(320-(button_unit/8), 230-(button_unit/8), button_unit/4, button_unit/4);
ellipse(320+(button_unit/8), 230+(button_unit/8), button_unit/4, button_unit/4);
ellipse(320-(button_unit/8), 270-(button_unit/8), button_unit/4, button_unit/4);
ellipse(320+(button_unit/8), 270+(button_unit/8), button_unit/4, button_unit/4);
ellipse(320-(button_unit/8), 310-(button_unit/8), button_unit/4, button_unit/4);
ellipse(320+(button_unit/8), 310+(button_unit/8), button_unit/4, button_unit/4);
}

function mousePressed() {
//changes emotions every time mouse is clicked
body_width = random(220, 260);
body_height = random(230, 270);
face_width = random(170, 210);
face_height = random(180, 220);
eye_w = random(30, 40);
eye_h = random(12, 25);
beak_w = random(5, 20);
beak_h = random(10, 20);
beak_dir = random(0, 2);
brow_outer_h = random(100, 120);
brow_inner_h = random(100, 120);
brow_width = random(2,7);
flipper_right_angle = random(-(1/4), 0);
flipper_left_angle = random(1, 5/4);
button_unit = random(15, 30);
}``````

I had a lot of fun making this project. Penguins are definitely my favorite kind of animal, so I thought I would make faces for these adorable, flightless birds. Because I couldn’t add mouths to penguins (which play a huge part for  expressions), I had to make up for it by changing their eyebrows and eyes. Enjoy!

## Nina Yoo- Project 02- Variable- Face Section E

``````/*Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-02
*/

var eyeSizeW = 44;
var eyeSizeH = 27;
var colorEye = 0;
var faceWidth = 192;
var faceHeight = 192;
var eyeBruiseWidth = 76;
var eyeBruiseHeight = 63;
var earH = 54;
var earW = 23;

function setup() {
createCanvas(480, 650);
noStroke();

}

function draw() {
background(167,217,201);

fill(229,222,167);
ellipse(240, 350, faceWidth, faceHeight);
fill(229,222,167);
ellipse(143, 350, earW, earH);
fill(229,222,167);
ellipse(336,350, earW, earH);

//hair
fill(0);
triangle(215,228, 211, 257,239,261);
triangle(239,261,222,221,278,163);

//left eye
fill(255);
arc(195,346, 44, 44, 0, PI);
fill(colorEye);
arc(195,346,24,15,0,PI);

//bruise
fill(175,127,183);
ellipse(286,350, eyeBruiseWidth,eyeBruiseHeight);

//right eye
fill(255);
ellipse(286,351,eyeSizeW,eyeSizeH);
fill(colorEye);
ellipse(286,350,24,15);

}

function mousePressed(){
faceWidth = random(192, 240);
faceHeight = random(192, 250);
colorEye = random (0, 200);
eyeSizeW = random (44, 85);
eyeSizeH = random (27, 50);
earW = random (23, 76);
earH = random (54, 100);
eyeBruiseWidth = random (76, 100);
eyeBruiseHeight = random (63, 90);

}

``````

The assignment required a lot of going back and forth with the variables because there were values I wanted to change, but having the variables also helped in the case that I didn’t have to go through the whole code and change every number. Another important factor I realized was that I needed to close the function draw in order for the function mousePressed to work. The mousePressed function was surprisingly easier than expected and having the variables also as a little cheat sheet for measurements was helpful.

## Jaclyn’s Variable Face

``````/* Jaclyn Saik
Project-02
Section E
*/

//face and hair variables
var eyeSize = 20;
var pupilSize = 10
var faceWidth = 150;
var faceHeight = 170;
var bunWidth = 100
var bunHeight = 100
var armLW = 160
var armRW = 480
var toungeL = 40
var toothL = 10
var eyebrowH = 155
var bluehair = 50
var redskin = 238

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

function draw() {
background(140, 120, 170);
noStroke();

//colors
s = color(redskin, 216, 193) //skin
r = color(206, 20, 110)
b = color(223, 140, bluehair)

//body
fill(s)
//arms

triangle(245, (height / 2) + 20, 240, 380, armLW, 600);
triangle(235 + (width / 4), (height / 2) + 20, 235 + (width / 4), 380, armRW, 600);
fill(r)
rect(240, height / 2, width / 4, height*(2/3), 20)

//hair
fill(b)
ellipse(width / 2, height / 3 + 5, faceWidth + 20, faceHeight + 40)
ellipse(width / 2 - faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)
ellipse(width / 2 + faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)

//face
fill(s)
ellipse(width / 2, height / 3 + 25, faceWidth,  faceHeight);
//eyes
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
var pupilLX = width / 2 - faceWidth * 0.25;
var pupilRX = width / 2 + faceWidth * 0.25;
fill(255);
ellipse(eyeLX, height / 3 + 15, eyeSize, eyeSize);
ellipse(eyeRX, height / 3 + 15, eyeSize, eyeSize);
fill(0)
//pupils
ellipse(eyeLX, height / 3 + 15, pupilSize, pupilSize);
ellipse(eyeRX, height / 3 + 15, pupilSize, pupilSize);

//tounge
fill(237, 106, 169)
ellipse(width / 2, height / 3 + 65, 30, toungeL)
//teeth
fill(255)
rect(width / 2 - 5, height / 3 + 60, 15, toothL)
//mouth
fill(s)
rect(width / 2 - 25, height / 3 + 50, 50, 10)

//nose
var noseWL = 300
var noseWR = 340
fill(247, 208, 95)
triangle(width / 2, height / 3 + 10, noseWL, height / 3 + 50, noseWR, height / 3 + 50);

//eyebrows
noFill();
strokeWeight(3)
stroke(218, 130, 55)
arc(eyeLX, eyebrowH, 40, 25, PI*1.2, 0, OPEN)
arc(eyeRX, eyebrowH, 40, 25, PI, TWO_PI*.9, OPEN)

}

function mousePressed() {

faceWidth = random(125, 150);
eyeSize = random(20, 50);
pupilSize = random(10, 15)
bunHeight = random(60, 120);
bunWidth = random(60, 120);
armLW = random(120, 200);
armRW = random(440, 520);
toungeL = random(30, 90);
toothL = random(10, 17)
eyebrowH = random(160, 145)
bluehair = random(20, 200)
redskin = random(100, 255)

}``````

This was an interesting task, and definitely very fun to research. I especially liked looking into how artists like Moka create algoritm-generated faces, and how the randomization tools of computers really highlight the odd ways our brains look and recognize facial expressions. Instead of working in a sketchbook, my main method of “sketching” for this project was first creating the static elements of my figure, so originally the arms and torso, and then playing with different features layered on top of each other to see what type of expressions come out. I found it especially interesting how much power the pupils and eyebrows have over a person’s expression.

## Project – 02 Min Lee

``````/*
Min Lee
Section A
mslee@andrew.cmu.edu
Project-02
*/

//face
var faceWidth = 150
var faceHeight = 150

//use for nose and mouth color
var faceColorR = 255
var faceColorG = 216
var faceColorB = 209

//eyes
var eyeWidth = 25
var eyeHeight = 15
var eyeColor = 255

//eye positioning
var eyeX = 20
var eyeY = 15

//nose positioning
var noseY = 5
var noseHeight = 60

//mouth shape
var mouthWidth = 25
var mouthHeight = 15
var distance = 30

//font
var textPlacement = 0

//stars
var a = 50

function setup() {
createCanvas(640, 480);
background(141,189,193);
}

function draw() {
background(141,189,193);
noStroke();
//face shape
fill(faceColorR, faceColorG, faceColorB);
ellipse(width/2 ,height/2 , faceWidth, faceHeight);
rect(width/2 - faceWidth/2, height/2, faceWidth, height);
//eyebrows
fill(faceColorR/2, faceColorG/2, faceColorB/2);
ellipse(width/2 - eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
ellipse(width/2 + eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
//eyes
fill(0);
ellipse(width/2 - eyeX, height/2 - eyeY + 20, 10, 8);
ellipse(width/2 + eyeX, height/2 - eyeY + 20, 10, 8);
//nose
fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
ellipse(width/2 - 7.5, height/2 + noseY/3*2, 10, 10);
ellipse(width/2 + 7.5, height/2 + noseY/3*2, 10, 10);
arc(width/2, height/2 + noseY, 15, noseHeight, PI, TWO_PI);
arc(width/2, height/2 + noseY - 1, 15, 10, 0, PI);
//mouth
fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
arc(width/2, height/2 + noseY + distance, mouthWidth, mouthHeight, 0, PI);
fill(faceColorR/2, faceColorG/2, faceColorB/2);
arc(width/2 - mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
arc(width/2 + mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
//ears
fill(faceColorR, faceColorG, faceColorB);
arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 30, 40, HALF_PI, PI + HALF_PI);
arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 30, 40, PI + HALF_PI, HALF_PI);
fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 15, 20, HALF_PI, PI + HALF_PI);
arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 15, 20, PI + HALF_PI, HALF_PI);
//chin
stroke(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
strokeWeight(2);
noFill();
beginShape();
curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
curveVertex(width/2 - 5, height/2 + 55 + noseY + distance);
curveVertex(width/2 + 5, height/2 + 55 + noseY + distance);
curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
endShape();
//shirt
fill(0);
strokeWeight(1);
rect(width/2-faceWidth/2, height - 60, faceWidth, 60);
fill(faceColorR, faceColorG, faceColorB);
arc(width/2, height - 60, faceWidth, 40, 0, PI);
//moving text
noStroke();
fill('DarkCyan');
textSize(50);
textFont('Helvetica');
text('bald is beautiful.', textPlacement, 100);
textPlacement = textPlacement + 2
if (textPlacement > 640) {
textPlacement = -350
};
//stars
fill(255,215,0);
rect(width/4, height/4 * 3, 50, 50);
rect(width/2 + 100, height/4 + 20, 50, 50);
fill(141,189,193);
//bottom left star
arc(width/4, height/4 * 3, a, a, 0, HALF_PI);
arc(width/4 + 50, height/4 * 3, a, a, HALF_PI, PI);
arc(width/4, height/4 * 3 + 50, a, a, PI + HALF_PI, TWO_PI);
arc(width/4 + 50, height/4 * 3 + 50, a, a, PI, PI + HALF_PI);
//top right star
arc(width/2 + 100, height/4 + 20, a + 2.5, a + 2.5, 0, HALF_PI);
arc(width/2 + 150, height/4 + 20, a + 2.5, a + 2.5, HALF_PI, PI);
arc(width/2 + 100, height/4 + 70, a + 2.5, a + 2.5, PI + HALF_PI, TWO_PI);
arc(width/2 + 150, height/4 + 70, a + 2.5, a + 2.5, PI, PI + HALF_PI);

}

function mousePressed() {
faceWidth = random(130,170);
faceHeight = random(110,190);
faceColorR = random(141,255);
faceColorG = random(80,255);
faceColorB = random(36,170);
eyeX = random(20,30);
eyeY = random(20,30);
eyeWidth = random(15,25);
eyeHeight = random(10,15);
noseY = random(0, 20);
mouthWidth = random(20, 25);
mouthHeight = random(15,20);
distance = random(20,35);
a = random(50,60);

}
``````

For my project, I wanted to create a message that resonates in my heart. While the variability in the faces that I created is not significant, I went for this effect to show that being a bald, green-skinned person does not make one any different than being a bald, orange-skinned person. Bald is beautiful, folks.