## Carley Johnson Project 02 Section E

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Assignment 02A
*/

var skinColor = 250
var eyeColor = 226
var lipColor = 145
var lipCorner = 200
var hairLength = 220
var eyebrowH1 = 160
var eyebrowH2 = 155

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

function draw() {
background(182, 212, 115);

fill(112, 62, 40)
stroke(112, 62, 40)
rect(200, 90, 220, hairLength, 100, 100, 0, 0 ) //back hair

fill(255, skinColor, 180)
stroke(skinColor)

fill(128, eyeColor, 252)
stroke(70)
ellipse (275, 175, 10, 10) //Left Eye

fill(128, eyeColor, 252)
stroke(70)
ellipse (300, 175, 10, 10) //Right Eye

fill(255, 124, lipColor)
stroke(255, 124, 145)
bezier(275, lipCorner, 280, 210, 285, 210, 300, lipCorner) //mouth

fill(215, 106, 58)
stroke(215, 106, 58)
rect (270, 90, 125, 75, 0, 50, 0, 50) //bangs

fill(112, 62, 40)
stroke(112, 62, 40)
bezier(255, eyebrowH1, 270, eyebrowH2, 280, eyebrowH2, 280, eyebrowH1) //Left eyebrow

fill(112, 62, 40)
stroke(112, 62, 40)
bezier(290, eyebrowH1, 290, eyebrowH2, 300, eyebrowH2, 320, eyebrowH1) //right eyebrow

}

function mousePressed() {
skinColor = random(190, 250)
eyeColor = random(190, 270)
lipColor = random(60, 160)
lipCorner = random(220, 185)
hairLength = random(200, 300)
eyebrowH1= random(170, 160)
eyebrowH2 = random(160, 145)

}

This was tough, a real learn-by-doing experience. Now I feel like I really understand variables and how to control them (like learning to add parameters to the ‘randomness’ under the mousePressed function) and am proud of this. It may not be the most complex face, but it definitely changes and the way the expression changes (done by changing the height of the corners of the mouth and eyebrows) which I really like.

## Min Jun Kim – Project 2 Variable Face

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 2
*/

var reee = 150
var faceDiff = 0.8
var faceCol = 250
var eyeSize = 30
var eyeDiff = 0.8
var pupilCol = 1
var browSlant= 10
var mouthFill = 100
var mouthSize = 30
var noseWidth = 10
var noseHeight = 25
var backColor = 100
var browS = 2
var hatHeight=100

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

function draw() {
'background design'
noStroke();
'green background'
background(107,209,150);
'aqua background'
fill(110,206,251);
rect(0,0,width*3/4,height);
'dark blue background'
fill(97,128,234);
rect(0,0,width/2,height);
'regular blue background'
fill(80,146,247);
rect(0,0,width/4,height);
'stripe'
fill(255,235,250);
'face color'
fill(255, faceCol,180);
'face'
ellipse(width/2, height/2, reee*faceDiff,reee);
'eye fill'
fill(250,250,250);
'eyes left'
ellipse(width/2-reee*faceDiff*0.25,height/2, eyeSize, eyeSize*eyeDiff);
'eyes right'
ellipse(width/2+reee*faceDiff*0.25, height/2, eyeSize,eyeSize*eyeDiff);
'eye fill'
fill(100, 100, pupilCol);
'pupil left'
ellipse(width/2-reee*faceDiff*0.25,height/2, 10, 10);
'pupil right'
ellipse(width/2+reee*faceDiff*0.25, height/2, 10,10);
'brow power'
stroke(1);
strokeWeight(browS);
'eyebrow left'
line(width/2-reee*faceDiff*0.35 ,height/2-reee*faceDiff*0.2+browSlant, width/2-reee*0.1, height/2-reee*0.1);
'eyebrow right'
line(width/2+reee*faceDiff*0.35 ,height/2-reee*faceDiff*0.2+browSlant, width/2+reee*0.1, height/2-reee*0.1);
noStroke();
'mouth fill'
fill(255,100,mouthFill);
'mouth'
ellipse(width/2,height/2+reee*0.28,10+mouthSize,10);
'nose fill'
fill(255,175,123);
'nose'
triangle(width/2-noseWidth,height/2+reee*0.15, width/2+noseWidth, height/2+reee*0.15, width/2, height/2+reee*0.15-noseHeight);
'hat'
stroke(1);
strokeWeight(3);
line(width/2-110,height/2-reee*0.2,width/2+110,height/2-reee*0.2);
fill(1)
rect(width/2-reee*faceDiff*0.45,hatHeight,reee*faceDiff*0.9,height/2-reee*0.2-hatHeight);

}

function mousePressed() {
reee = random(130,230);
faceDiff= random(0.7,1);
faceCol = random(190,220);
eyeSize = random(20,35);
eyeDiff= random(0.6,1);
pupilCol = random(1,250);
browSlant = random(1,12);
mouthFill = random(1,255);
mouthSize = random(1,30);
noseWidth = random(8,15);
noseHeight = random(20,30);
browS = random(1,3);
hatHeight = random(0,100);

}

This is my project 2 variable face. It was actually quite fun to do because I got to see a large number of faces. I wanted to do a British soldier inspired piece. It took a bit longer than I wanted though haha.

## Judy Li-Project-02-Variable-Face

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-02
*/

var eyeSize = 30;
var ballSize = 8;
var ellfaceWidth = 100;
var ellfaceHeight = 150;
var recfaceWidth = 100;
var recfaceHeight = 150;
var noseSize = 5;
var mouthWidth = 10;
var mouthHeight = 5;
var hatWidth = 200;
var hatHeight = 15;

function setup() {
createCanvas(640, 480);
stroke(0);
strokeWeight(1.5);
r = random(255);
g = random(255);
b = random(255);
}

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.
ellfaceWidth = random(125, 250);
ellfaceHeight = random(125, 250);
eyeSize = random(10, 30);
recfaceWidth = random(125, 250);
recfaceHeight = random(125, 250);
noseSize = random(1, 5);
mouthWidth = random(10, 50);
mouthHeight = random(1, 10);
recnoseWidth = random(10, 50);
recnoseHeight = random(10, 50);
hatWidth = random(250,300);
hatHeight = random(5,25);
fill(r,g,b,);
r = random(255);
g = random(255);
b = random(255);
}

function draw() {
scale(7/8);
background(218,175,32);
if (mouseX < (width / 2)) {
ellipse(width / 4, height / 2, ellfaceWidth,  ellfaceHeight);
var eyeLX = width / 4 - ellfaceWidth * 0.25;
var eyeRX = width / 4 + ellfaceWidth * 0.25;
var ballLX = width/4 - ellfaceWidth * 0.25;
var ballRX = width/4 + ellfaceWidth * 0.25;
//Glasses
push();
strokeWeight(5);
stroke(255);
ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
pop();
//Eyes
strokeWeight(5);
ellipse(ballLX, height / 2, ballSize/4, ballSize/4);
ellipse(ballRX, height / 2, ballSize/4, ballSize/4);
//Nose
push();
stroke(0);
strokeWeight(5);
ellipse(width / 4, (height / 2)+20, noseSize, noseSize);
//Mouth
strokeWeight(10);
ellipse(width / 4, (height / 2)+50, mouthWidth, mouthHeight);
pop();
}

if (mouseX >(width / 2)) {
rect(3*(width / 5), (height / 3), recfaceWidth,  recfaceHeight);
var eyeLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
var eyeRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
var ballLX = (3*(width / 5)) + 1.75*(recfaceWidth * 0.2);
var ballRX = (3*(width / 5)) + 3.25*(recfaceWidth * 0.2);
//Glasses
push();
strokeWeight(5);
stroke(255);
ellipse(eyeLX, (height / 3)+50, eyeSize, eyeSize);
ellipse(eyeRX, (height / 3)+50, eyeSize, eyeSize);
pop();
//Eyes
strokeWeight(5);
ellipse(ballLX, (height / 3)+50, ballSize/2, ballSize/2);
ellipse(ballRX, (height / 3)+50, ballSize/2, ballSize/2);
//Nose
push();
stroke(255);
strokeWeight(5);
ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2), noseSize, noseSize);
//Mouth
strokeWeight(10);
ellipse(3*(width / 5) + (recfaceWidth/2), (height / 2)+30, mouthWidth, mouthHeight);
pop();
}
}

This project was a challenging one at first. I think I had some trouble with some overlaps in terms of what was supposed to show up first, second, and etc. But, I enjoyed writing up the codes for this project because it was fun and I was satisfied with my end results.