## Atraylor – Project 02 – Variable Faces

When making this project, I was thinking of all the proportional measurements I use to make human faces, especially the relationship between the eyes and the rest of the face. Starting out, I noticed that my random faces were just scaling up and down because the ratios were all established on one variable: the eye size. The end result is more interesting and resembles some of the steps I would make to draw a face.

``````
//Allison Traylor, atraylor,
//section B, Project 02

var eyeSize = 30; //eye size
var eyeSpaceL = 0.25; //eye space left
var eyeSpaceR = 0.25; //eye space right
var faceWidth = (eyeSize * 5); //face oval width (relative to eye size)
var faceHeight = 210; // face oval height
var craniumWidth = 150;
var craniumHeight = 150;
var mouthWidth = 25; // corner locations for mouth

var colorL = (200,200,200,200); // color of left eye
var colorR = (200,200,200,200); // color of right eye
var mColor = (200,200,200,200); // color of mouth

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

}

function draw() {

background(222);
var noiseVal = random(0.001, .6); // flickering lines
//chin height is proportional to faceHeight, tring to make it right below the mouth
var chinHeight =  height/2 + faceHeight/4 + faceHeight/8 + faceHeight/16;

// Cranium
noFill();
ellipse(width/2, height/2 - eyeSize, craniumWidth, craniumHeight);

//bounding box
push();
noFill();
stroke(noiseVal * 255); // lines flicker
rect(width/2 - craniumWidth/2, height/2 - eyeSize - craniumHeight/2, craniumWidth, craniumHeight);
pop();

//face ellipse
noFill();
ellipse(width/2, height/2, faceWidth, faceHeight);

// nose line proportional to eyes
line(width/2 - eyeSize/2, height/2 + faceHeight/4,
width/2 + eyeSize/2, height/2 + faceHeight/4);

//eyes
fill(colorL);
ellipse((width/2) - faceWidth*eyeSpaceL, height/2, eyeSize, eyeSize); // Left eye (to viewer)
fill(colorR);
ellipse((width/2) + faceWidth*eyeSpaceR, height/2, eyeSize, eyeSize); // right eye

//eye line
line(width/2 - faceWidth/2, height/2, width/2 + faceWidth/2, height/2);

// mouth
fill(mColor);
//I'm trying to isolate the mouth in a certain area between nose and chin
triangle((width/2) - mouthWidth, height/2 + faceHeight/4 + faceHeight/8,
width/2, height/2 + faceHeight/4 + faceHeight/12,
(width/2) + mouthWidth,  height/2 + faceHeight/4 + faceHeight/8);

//chin
push();
noFill();
stroke(noiseVal * 255);
ellipse(width/2, chinHeight, mouthWidth, mouthWidth);
pop();

// plumbline
line(width/2, height/4, width/2, (height - height/4));

}

function mousePressed(){

// generating random values
eyeSize = random(20, 50);
eyeSpaceR = random(0.20, 0.30);
eyeSpaceL = random(0.20, 0.30);
faceHeight = random(190, 250);
craniumWidth = random(150, 200);
craniumHeight = random(150, 200);
mouthWidth = random(10, 30);

var from = color(200,200,200,200); //interpolate from this color
var to = color(0,0,0,200); // to this color

// random numbers to be used in lerpColor
var lerpNumber = random(0,1);
var lerpNumber2 = random(0,1);
var lerpNumber3 = random(0,1);

mColor = lerpColor(from, to, lerpNumber); // random shade for mouth

colorR = lerpColor(from, to, lerpNumber2); //random shade for right eye
colorL = lerpColor(from, to, lerpNumber3); // random shade for left eye
}
``````

## yoonyouk-project02-variablefaces

``````//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project-02

var eyeLxSize = 40;
var eyeRxSize = 20;
var faceWidth = 240;
var faceHeight = 200;

var nose1x = 300;
var nose1y = 250;
var nose2x = 350;
var nose2y = 250;
var nose3x = 325;
var nose3y = 285;
var earpoint = 100;
var smileWidth = 25;
var smileHeight = 25;

//colors
var R1 = 232;
var R2 = 64;
var B1 = 33;
var B2 = 91;
var B3 = 237;
var Ye1 = 323;
var Ye2 = 204;
var Ye3 = 74;

var RW = 4 //weight of any red line

function setup() {
createCanvas(640, 480);
background(220);
angleMode(DEGREES);
}

function draw() {
background (B1, B2, B3);

//face
noStroke();
fill(Ye1, Ye2, Ye3);
ellipse (width/2, height/2 - 10, faceWidth, faceHeight)

//eyes
stroke(R1, R2, R2);
strokeWeight(RW);
noFill();
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeLxSize, eyeLxSize);
ellipse(eyeRX, height / 2, eyeRxSize, eyeRxSize);

//triangle nose
noStroke();
fill(R1, R2, R2);
triangle(nose1x, nose1y, nose2x, nose1y, nose3x, nose3y);

//ears
//left ear
fill(Ye1, Ye2, Ye3);
triangle(220, 190, 225, earpoint, 310, 150);

//right ear
triangle(420, 190, 420, earpoint, 340, 150);

//mouth
stroke(R1, R2, R2);
strokeWeight(RW);
noFill();
arc(width / 2, height / 2 + faceWidth * 0.20, smileWidth, smileHeight, 0, 180);
}

function mousePressed() {
faceWidth = random(200, 300);
faceHeight = random(200, 275);
eyeLxSize = random(20, 80);
eyeRxSize = random(30, 60);
R1 = random(200, 250);
R2 = random(50, 100);
B1 = random(20, 70);
B2 = random(90 ,140);
B3 = random(200, 250);
Ye1 = random(300, 350);
Ye2 = random(180, 230);
Ye3 = random(50, 100);
RW = random(7, 15);
smileWidth = random(40, 80);
smileHeight = random(20, 50);
nose1x = random(270, 300);
nose1y = random(240, 260);
nose2x = random(320, 350);
nose3x = random(300, 325);
nose3y = random(270, 285);
earpoint = random(50, 120);
}
``````

Much like the first project, I felt that this project required a lot of playing around and trial and error. I wanted to use primary colors in order to range the different color values to evict a childish type of project. In order to experiment with different shapes, I decided to go with a cat face. I like how each image generates a new combination/a new cat face upon each click.

## daphnel-Project02-VariableFace

``````//Daphne Lee
//15-104::1 (9:30am)-Section D
//daphnel@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var faceInnerW= 150;
var faceInnerH= 150;
var nosePosX=50;
var nosePosY= 20;
var blush= 30;

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

function draw() {
background(255, 230, 238);
fill(155, 155, 155);
ellipse(width / 2, height / 2, faceWidth, faceHeight);

//innerface
fill(256);
ellipse(width / 2 - 40, height / 2, faceInnerW/1.5,  faceInnerH);
ellipse(width / 2 + 40, height / 2, faceInnerW/1.5,  faceInnerH);
ellipse(width / 2, height / 2 +43, faceInnerW/1.5 +25,  faceInnerH/1.7);

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

//corner white eyes
fill(256);
ellipse(eyeLX-9, height / 2 -17, eyeSize/1.5, eyeSize/1.5);
ellipse(eyeRX-9, height / 2 -17, eyeSize/1.5, eyeSize/1.5);

//blush
fill(255, 204, 204);
ellipse(width/2 -50, height/2 +21, blush, blush/2);
ellipse(width/2 +50, height/2 +21, blush, blush/2);

//nose
strokeWeight(0);
fill(255, 204, 0);
ellipse(width/2, height/2 + 20,nosePosX, nosePosY);

}

function mousePressed() {
faceWidth = random(190, 250);
faceHeight = random(190, 250);
faceInnerW= random(150,165);
faceInnerH= random(150,165);
eyeSize = random(20, 30);
nosePosX = random(30, 60);
nosePosY = random(10, 40);
blush= random (20,55);

}
``````

I started with an idea of a penguin in my mind. It was hard for me to try to get the beak down since I wanted to use a triangular shape as the base but I ended up with an ellipse. It’s quite similar to my first project in the way I used the shapes and tried to overlap them in order to get another shape that I wanted. Overall, I think the end result wasn’t that bad.

## aranders-project-02

``````//Anna Anderson
//Section D
//aranders@andrew.cmu.edu
//project-02

var mouth = 15;
var nose = 10;
var eyes = 25;
var brows = 10;
var faceHeight = 230;
var faceWidth = 200;

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

function draw() {
background(130, 211, 168);

//face
fill(249, 231, 126);
ellipse(320, 240, faceWidth, faceHeight);

//mouth
fill(240, 125, 140);
ellipse(320, 315, mouth * 2, mouth)
noFill();
beginShape();
curveVertex(280, 290);
curveVertex(300, 309);
curveVertex(320, 316);
curveVertex(340, 309);
curveVertex(360, 290);
endShape();

//nose
fill(250);
triangle(315 - nose, 270, 320, 250 + nose, 325 + nose, 270);

//eyes
fill(0);
ellipse(275, 230, eyes, eyes * 1.5);
fill(0);
ellipse(365, 230, eyes, eyes * 1.5);

//brows
line(260 - brows, 180 + brows, 290, 180);
line(350, 180, 400 - brows, 180 + brows);
}

function mousePressed() {

mouth = random(5, 20);
nose = random(5, 20);
eyes = random(15, 35);
brows = random(5, 20);
faceHeight = random(220, 300);
faceWidth = random(190, 250);
}
``````

I really enjoyed creating this interactive face! I made many dumb errors in the course of creating it, but eventually it came together.

## katieche – project 02 variable face

``````// Katie Chen
// 9:30 AM Class
// katieche@andrew.cmu.edu
// Assignment-02

var eyeSize = 20;
var earWidth = 50;
var earHeight = 55;
var ewSize = 30;
var cSize = 25;
var ccSize = 25;
var x = 6;
var y = 4;
var v = 6;
var z = 5;

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

function draw() {
background(207, 228, 247);

strokeWeight(0);
stroke(250);
strokeCap(ROUND);
fill (250);
beginShape();
// top right
// top left
// bottom right
// bottom left
endShape(CLOSE);

// ears
fill (250);
var earL = width / 2 - headWidth * 0.25;
var earR = width / 2 + headWidth * 0.25;

// cheeks
fill (255, 221, 211);
noStroke();
var cL = width / 2 - headWidth * 0.25 - 10;
var cR = width / 2 + headWidth * 0.25 + 10;
var dist = 25
ellipse(cL, height / 2 + dist, cSize, cSize);
ellipse(cR, height / 2 + dist, ccSize, ccSize);

// eyes
fill (250);
strokeWeight(1);
stroke (0);
var ewL = width / 2 - headWidth * 0.25;
var ewR = width / 2 + headWidth * 0.25;
ellipse(ewL, height / 2, ewSize, ewSize);
ellipse(ewR, height / 2, ewSize, ewSize);
fill (0);
var eL = width / 2 - headWidth * 0.25;
var eR = width / 2 + headWidth * 0.25;
ellipse(eL, height / 2, eyeSize, eyeSize);
ellipse(eR, height / 2, eyeSize, eyeSize);

// left eyebrow
stroke (0);
strokeWeight(y);
strokeCap(ROUND);
line(eL - 7, 290+x, eL +7, 290+y);

// right eyebrow
strokeWeight(y);
strokeCap(ROUND);
line (eR - 7, 290+v, eR +7, 290+z);

}

function mousePressed() {
eyeSize = random(10, 30);
cSize = random(20, 40);
ewSize = random(20, 40);
earWidth = random(15, 75);
earHeight = random(55, 120);
dist = random(20, 30);
ccSize = random(20, 40);
x = random(0, 10);
y = random(0, 10);
v = random(0, 10);
z = random(0, 10);
}
``````

I started the project with the template and shapes that I felt more comfortable playing around with (ellipses, lines, rectangles, etc.), before trying new shapes. For me, the body was the hardest to construct since I tried curveVertex(); for the first time, and even now, it doesn’t necessarily look the way I intended it to (it kind of just looks like a marshmallow now which I guess I’m also okay with). A lot of my project did come from happy accidents (i.e I was trying to make cheeks but ended up making ears, etc.) which I thought was fun, but it’d also be neat to eventually be confident enough in coding that I can actually make what I intend to make.

In terms of planning, I didn’t do anything much last project so I decided I’d try to make something in illustrator first (as seen below) this time and then recreate it with code. Unfortunately after a string of accidental shapes and still not being able to understand how to make curves, I ended up just kind of making everything on a whim for my final!

## mecha-project02-variable-face

``````//eyes
var eyeSize = 12;

//face
var faceWidth = 130;
var faceHeight = 150;
var roundX1 = 20;
var roundX2 = 20;
var roundY1 = 20;
var roundY2 = 20;

//mouth
var roundXX1 = 10;
var roundXX2 = 10;
var roundYY1 = 10;
var roundYY2 = 10;
var mouthWidth = 30;
var mouthHeight = 18;
var mouthX = 34;

//color
var colorR = 60;
var colorG = 200;
var colorB = 10;
var colorPr = 250;
var colorPg = 122;
var colorPb = 129;
var colorLr = 250;
var colorLg = 220;
var colorLb = 220;
var colorBr = 10;
var colorBg = 10;
var colorBb = 200;

//eyebrows
var browWidth = 10;
var browHeight = 10;

//nose
var noseHeight = 12;
var noseWidth = 6;

//hair
var hairX = 300;
var hairY = 190;
var hairWidth = 60;
var hairHeight = 30;

//eyebrows
var arcA = 0;
var arcB = 0;
var arcC = 0;
var arcD = 0;

function setup() {
createCanvas(640,480);
angleMode(degrees);
textSize(12);
}

function draw() {
background(255);
//face
noStroke();
fill(colorLr,colorLg,colorLb);
strokeWeight(3);
rect(280,200, faceWidth, faceHeight,roundX1, roundX2, roundY1, roundY2);

//eyes
noStroke();
fill(colorG+50,colorB+60,colorR);
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;

//text bubble
fill(colorLr,colorLg-40,colorLb-30);
strokeWeight(1.5);
noStroke();
rect(147,280,104,40,30,30,0,30);
triangle(220,290,200,320,260,320);

//text
noStroke();
fill(255);
text("w o w z a ! !",168,293,400,400);

//nose
fill(colorPr, colorPb, colorPg);

//hair
noStroke();
fill(colorG+50,colorB+60,colorR);
rect(hairX,hairY,hairWidth,hairHeight,200);

//eyebrows
noFill();
strokeWeight(2);
stroke(colorG+50,colorB+60,colorR);
arc(eyeLX,height/2,40,40,PI+3.4-arcA,HALF_PI+arcB,OPEN);
arc(eyeRX+6,height/2,40,40,HALF_PI-0.4-arcC,HALF_PI+0.6+arcD,OPEN);

//blush
fill(colorLr,colorLg-40,colorLb-30);
noStroke();

//mouth
strokeWeight(3);
stroke(colorPr, colorPb, colorPg);
fill(255);
rect(280+mouthX,height/2+eyeAdd2+20, mouthWidth, mouthHeight+random(0,10),roundXX1, roundXX2, roundYY1, roundYY2);

}

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(130, 150);
faceHeight = random(150, 200);
eyeSize = random(12, 15);
roundX1 = random(10,70);
roundX2 = random(10,70);
roundY1 = random(10,70);
roundY2 = random(10,70);
colorR = random(10,80);
colorG = random(100,230);
colorB = random(10,80);
roundXX1 = random(1,9);
roundXX2 = random(1,9);
roundYY1 = random(1,9);
roundYY2 = random(1,9);
mouthHeight = random(20,50);
mouthWidth = random(20,50);
mouthX = random(20,30);
colorPr = random(200,255);
colorPg = random(100,150);
colorPb = random(100,150);
colorLr = random(270,255);
colorLg = random(220,255);
colorLg = random(220,255);
noseWidth = random(4,10);
noseHeight = random(9,14);
hairWidth = random(30,100);
hairHeight = random(20,50);
hairX = random(300,320);
arcA = random(0,0.4);
arcB = random(0,0.4);
arcC = random(0,0.4);
arcD = random(0,0.4);
colorBr = random(0,140);
colorBg = random(0,40);
colorBb = random(200,255);
}``````

My process in completing this project was similar to the last one in that I worked trial and error through all of the elements of the face–starting with a base shape and going on to the eyes, mouth, nose, etc. As an attempt to stay consistent with the style of the face I created for the previous project, I decided generate faces with a similar worried expression. Rather than have my code be completely randomized, I set a lot of limitations to the range of values so as to be able to be able to have more control over the random nature of the project.

In the end, I focused most on creating a good color scheme in which all of the facial elements would go well together. I had a lot of trouble with this given the amount of randomization in my code. In order to achieve the color scheme that I liked, I altered the range of numbers for the R, G, and B values. I focused on having more warm pastel tones in my project so that the faces I generated would be aesthetically pleasing in a series.

## Bettina-SectionC-Project-02-VariableFace

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

//import math;
var TLx=120; //top left x
var TLy=100; //top left y
var TRx=400; //top right x
var TRy=270; //top right y
var BRx=330; //bottom right x
var BRy=500; //bottom right y
var BLx=160; //bottom left x
var BLy=490; //bottom left y
/*eye coordinates*/
var LEx=110; //left eye x
var LEy=280; //left eye y
var REx=300; //right eye x
var REy=260; //right eye y
var eye=50
/*eyebrows*/
var high= 50; //how much higher than eyes
var BrowAngle=0; //angle of brows
var BrowThick=10;  //how thick brows
var lineStart= 60;//left starting x of brows
var lineLength= 30; //length of brows
var LBstart=60; //left brow start
var RBstart=275; //right brow start
var LBangle=0;
var RBangle=0
/*nose*/
var noseBLx=150;
var noseBLy=320;
var noseBRx=200;
var noseBRy=350;
var noseMx=180;
var noseMy=200;
/*mouth*/
var mouthTLx=150;
var mouthTLy=400;
var mouthWidth=100;
var mouthHeight=100;
var MouthRound=20;

function draw() {
background(255);
strokeWeight(6);
/*face*/
noFill();
stroke(90,196,186); //teal
beginShape();
curveVertex(BRx,BRy);//ones on the ends are the "handles"
curveVertex(BRx,BRy);//first point (bottom right)
curveVertex(TRx,TRy);//top right
curveVertex(TLx,TLy);//top left
curveVertex(BLx,BLy);//bottom left
curveVertex(BRx,BRy);//bottom right
curveVertex(TRx,TRy);// last point (top right)
curveVertex(TRx,TRy);//ones on the ends are the "handles"
endShape();;

/*eyes*/
stroke(119,117,224); //indigo
ellipse(REx,REy,eye);//right eye
ellipse(LEx,LEy,eye); //right eye
/*eyebrows*/
strokeWeight(BrowThick);
line(LBstart,LEy-high,LBstart+lineLength,(LEy-high)+LBangle); //left brow
line(RBstart,REy-high,RBstart+lineLength,(REy-high)+RBangle); //right brow
/*nose*/
strokeWeight(6);
stroke(232,117,106);//red
triangle(noseBLx,noseBLy,noseMx,noseMy,noseBRx,noseBRy);
/*mouth*/
rect(mouthTLx,mouthTLy,mouthWidth,mouthHeight,MouthRound);

}

function mousePressed() {
/*face*/
TLx=random(80,200);
TLy=random(100,300);
TRx=random(300,440);
TRy=random(80,310);
BLx=random(80,200);
BRx=random(310,440);
/*eyes*/
REx=random((TRx/2)+40,TRx);
LEx=random(TLx,((TRx/2)-40));
eye=random(10,45);
REy=random(TLy,BLy);
LEy=REy+random(-10,10);
/*eyebrows*/
lineStart=random(-20,20);
LBstart= (LEx-(eye/2)+lineStart);
lineLength=random(30,80);
BrowThick=random(6,14);
RBstart=(REx-(eye/2)+lineStart);
/*nose*/
noseBLx=random(LEx+20,LEx+((REx-LEx)/2));
noseBRx=noseBLx+random(10,60);
noseBLy=random(LEy+eye,BRy);
noseBRy=noseBLy;
noseMy=random((noseBLy-50),noseBLy);
noseMx=random(noseBLx,noseBRx);
/*mouth*/
mouthTLx=random(Math.max(TLx,BLx),(noseMx-20));
mouthTLy=random((noseBLy+20),BLy);
mouthWidth=random(20,150);
mouthHeight=random(0,80);
MouthRound=random(10,50);
BrowCounter=3;
LBangle=random(-30,31);
RBangle=random(-30,31);
}
``````

I was inspired by Moka piece, which felt playful and childish. I wanted to challenge myself to create more organic lines as opposed to geometric ones I did for my first project. After a lot of math and quadrants, and bringing a bit of Math.min and Math.max, I was able to set enough rules for the randomization so the facial features were in believable positions.

I intended for each face to have the energy of children’s drawings, incorporating near primary colors for the lines. My concept was that generative art is not about creating a single perfect piece, but instead a system. Thus, while each face on it’s own seems laughable, I intended to present the outcome as patterns, showing the theme and variation throughout my system.

For the time being, I could not implement enough rules to draw all these faces in one program (my code was getting messy and I could not figure out how to put in conditionals), so I modified the program above to make the face outline different colors, add an additional curve vertex, as well as add an additional translated outline.