Category: Assignment-04-Face

Variable Faces

Face

I used the last homework as a template since I couldn’t figure out a way to start from the scratch. I put the face shape, ears(the size and the placement), eye size, eyebrows and mouth as a variable. The mouth and eye placement is not random but is calculated every time and is placed relative to the face and the chin. The face colour is also random on a very small scale, since I wanted to keep the colour close to peach colour

color faceColor = color(200,200,200);

float earPlaceY = 172;
float earSizeX = 27;
float earSizeY = 45;
float faceLengthY = 270;
float faceChinX = 120;
float faceChinY = 230;
float faceWidthX = 100;
float faceWidthY = 150;
float faceForheadX = 130;
float faceForheadY = 100;
float eyeSizeX = 40;
float eyeSizeY = 30;
float eyebrowY1 = 130;
float eyebrowY2 = 150;
float mouthMid = 250;

void setup(){
  size(400, 400);
}

void mousePressed(){
  faceColor = color(random(240,255),random(208,228),random(180,190));
  earPlaceY = random(160,185);
  earSizeX = random(20,35);
  earSizeY = random(35,55);
  faceLengthY = random(230,310);
  faceChinX = random(100,140);
  faceChinY = random(210,250);
  faceWidthX = random(70,130);
  faceWidthY = random(120,180);
  faceForheadX = random(110,150);
  faceForheadY = random(80,120);
  eyeSizeX = random(20,60);
  eyeSizeY = random(15,45);
  eyebrowY1 = random(130,150);
  eyebrowY2 = random(130,150);
  //mouthX = random();
  //mouthY = random();
  mouthMid = random(190,270);
}
 
void draw(){
  background(0,77,153);
  strokeWeight(4);
  stroke(0);
  //face colors
  fill(faceColor);
  //ears
  ellipse(faceWidthX,earPlaceY,earSizeX,earSizeY);
  ellipse(400-faceWidthX,earPlaceY,earSizeX,earSizeY);
  //face
  beginShape();
  curveVertex(400-faceForheadX,faceForheadY);
  curveVertex(faceForheadX,faceForheadY);
  curveVertex(faceWidthX,faceWidthY);
  curveVertex(faceChinX,faceChinY);
  curveVertex(200,faceLengthY);
  curveVertex(400-faceChinX,faceChinY);
  curveVertex(400-faceWidthX,faceWidthY);
  curveVertex(400-faceForheadX,faceForheadY);
  curveVertex(faceForheadX,faceForheadY);
  endShape(CLOSE);
  //eyes
  fill(255);
  ellipse((faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX,eyeSizeY);
  ellipse(400-(faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX,eyeSizeY);
  fill(0);
  ellipse((faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX/3,eyeSizeY/3);
  ellipse(400-(faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX/3,eyeSizeY/3);
  //mouth
  beginShape();
  curveVertex((faceWidthX+200)/2,faceChinY);
  curveVertex(faceChinX*3/2,faceChinY-20);
  curveVertex(200,mouthMid);
  curveVertex(400-faceChinX*3/2,faceChinY-20);
  curveVertex(400-(faceWidthX+200)/2,faceChinY);
  endShape();
  //eyebrows
  strokeWeight(8);
  line((faceWidthX+200)/2-15,eyebrowY1,(faceWidthX+200)/2+15,eyebrowY2);
  line(415-(faceWidthX+200)/2,eyebrowY1,385-(faceWidthX+200)/2,eyebrowY2);
  //hair
  strokeWeight(4);
}

Miss America Generator

The source of all Miss Americas!

I was unable to convert it to p5.js. It would have been better to click yourself to generate a Miss America. This was put together with a lot of brute force coding, I used the random function for every variable. Some of the random numbers were randomly choosing a type of object or string to put (like the type of bangs, or the names) and the other way I used random numbers were to change the size of something (like the slight change in the shape of the eyes, or the hair length)

missamericas1

//cc Charlotte Stiles 
//Miss America Generator

float sideFace = 0, chin = 0;
color bgColor = color(int(random(200)),int(random(200)),int(random(200)));
String [] issueOne = {"Human ", "Youth ", "Senior ", "Homeless ", "Animal ","Disease ", "Prison ","World Peace ","Global Climate Change "};
String [] issueTwo = {"Rights", "Brought to Justice", "Awareness", "Abuse Pervention", "Help","Problems","Rescue","Fund","Appreciation"};
String [] name = {"Sophia","Emma","Olivia","Stephanie","Ava","Mia","Emily","Abigail","Madison","Vanessa","Nina","Avery","Sofia",
"Chloe","Ella","Harper","Amelia","Aubrey","Addison","Evelyn","Natalie","Grace"};
int nameNum = int(random(name.length));
int i1 = int(random(1,9));
int i2 = int(random(1,9));
int bangsNum = int(random(1,4));
color hairColor;
color skinColor;
int hairColorNum = int(random(8));
int hairLength = int(random(20));
float eyeNum = random(-3,3);
float mouthNum = random(-3,3);
float ex=0,ey=0;
void setup(){
size(400,400);
ellipseMode(CENTER);
}

void draw(){
noStroke();
fill(bgColor);
rect(0, 0, width, height);
hair();
face();
hairColorFun();
skinColorFun();
eyes();
bangs();
platformIssue();
name();
mouth();

}

void face(){
fill(skinColor);
beginShape();
curveVertex(252,142);
curveVertex(158,129);
curveVertex(131,126);
curveVertex(112,150);
curveVertex(120-sideFace,223);//left cheak
curveVertex(200,279+ chin); //chin
curveVertex(280+sideFace,218 );// right cheak
curveVertex(287,155);
curveVertex(257,118);
curveVertex(130,127);
curveVertex(156,219);
endShape(); 
}

void hairColorFun(){

if (hairColorNum < = 5) {
hairColor = color(231,235,153) ;
}
else if (hairColorNum == 6) {
hairColor = color(80,10,2) ;
}
else if (hairColorNum == 7){
hairColor = color (200,127,33);
}

}

void skinColorFun(){

if (hairColorNum <= 5) { skinColor = color(255,218,186) ; } else if (hairLength >= 20) {
skinColor = color(138,93,33) ;
}
else if (hairLength < = 19){
skinColor = color (250,194,145);
}

}

void bangs(){
fill(hairColor);
if (bangsNum == 1) {
beginShape();
curveVertex(97,89);
curveVertex(157,82);
curveVertex(258,175);
curveVertex(313,170);
curveVertex(310,157);
curveVertex(278,96);
curveVertex(239,178);
endShape();

}

else if (bangsNum == 2) {
beginShape();
curveVertex(250,35);
curveVertex(138,71);
curveVertex(108,137);
curveVertex(290,142);
curveVertex(297,100);
curveVertex(246,74);
endShape();
}

else if (bangsNum == 3) {
beginShape();
curveVertex(239,112);
endShape();
}


}

void name(){
textSize(30);
textAlign(CENTER);
text(name[nameNum],width/2,30);
}


void hair(){
fill(hairColor);
ellipse(201,142,220,-176);
rect (94,137,216,224 - hairLength,32);
}

void eyes(){
fill(0);
beginShape();
curveVertex(ex+120,ey+249);
curveVertex(ex+127+eyeNum,ey+186);
curveVertex(ex+145,ey+177);
curveVertex(ex+159,ey+184);
curveVertex(ex+163+eyeNum,ey+192);
curveVertex(ex+137,ey+195);
endShape();

triangle(119,170,134,186,127,187);
triangle(123,162,142,187,132,184);
triangle(130,161,149,182,139,183);

triangle(277,164,264,181,268,184);
triangle(273,162,259,187,248,184);
triangle(265,161,252,182,241,183);

beginShape();
curveVertex(ex+153,ey+210);
curveVertex(ex+262-eyeNum,ey+188);
curveVertex(ex+257,ey+177);
curveVertex(ex+232,ey+184);
curveVertex(ex+233-eyeNum,ey+192);
curveVertex(ex+246,ey+195);
endShape();

}

void mouth(){
noStroke();
fill(200 + (hairColorNum*7) ,50,50);
beginShape();
curveVertex(width/2+157, height/2+10);
curveVertex(width/2+9, height/2+22);
curveVertex(width/2+-2, height/2+25);
curveVertex(width/2+-19, height/2+23);
curveVertex(width/2-47, height/2+37);
curveVertex(width/2+-3, height/2+(61+mouthNum));
curveVertex(width/2+39, height/2+33);
curveVertex(width/2+11, height/2+-13);
endShape();
fill(255);
beginShape();
curveVertex(width/2+207, height/2+10);
curveVertex(width/2+15, height/2+35);
curveVertex(width/2+0, height/2+37);
curveVertex(width/2+-23, height/2+36);
curveVertex(width/2-46, height/2+37);
curveVertex(width/2+0, height/2+47);
curveVertex(width/2+40, height/2+33);
curveVertex(width/2+11, height/2+37);
endShape();
}


void platformIssue(){
textSize(13);
fill(0);
text("Platform Issue: " + issueOne[i1] + issueTwo[i2],width/2,380); 
//I'm putting i1 and i2 as global variables so it choses one random 
//number for each time the program runs, and sticks with it
}

void mouseClicked(){
sideFace = random(-10,10);
chin=(random(-5,15));
bgColor = color(int(random(200,255)),int(random(200,255)),int(random(200,255)));
i1 = int(random(1,9));
i2 = int(random(1,9));
bangsNum = int(random(1,4));
hairColorNum = int(random(8));
hairLength = int(random(48));
eyeNum = random(-3,3);
mouthNum = random(-3,3);
nameNum = int(random(name.length));
}



Alex Face Changer

Face Changer

This was the assignment I decided to start out with. It was quite a challenge and more of an experience/ experimental piece. Fun fact: I figured out how to randomize the color on my own before we were taught it in class. so, that was a very proud accomplishment of mine, which is kind of sad. My second modification was adding a mouth to the example face. For this used a triangle to stick to the simple geometric shape aesthetic. I then continued to have the mouth shape randomize. My third modification was adding pupils and getting the position of the eye and pupils to move with ever frame.

float eyeSize = 20; 
float eyePlace = height/2;
float faceWidth = 100; 
float faceHeight = 120; 
float mouthWidth = 50;
float mouthHeight = 200;
int red=255;
int blue=255;
int green=255;

void setup(){
  size(300,300); 
 frameRate (2); 
}
 
void draw(){
  background(180);
  float clampedX = constrain(mouseX, faceWidth, faceWidth);
  fill(red, green, blue);
    ellipse (width/2, height/2, faceWidth, faceHeight); 
    
 fill(red/2,green/2, blue/2);
  float eyeLX = width/2 - faceWidth*0.25;
  float eyeRX = width/2 + faceWidth*0.25;
  ellipse (eyeLX, eyePlace, eyeSize, eyeSize); 
  ellipse (eyeRX, eyePlace, eyeSize, eyeSize);
  
   float mouthLX = width/2 - faceWidth*0.25;
  float mouthRX = width/2 + faceWidth*0.25;
  float mouthHX = mouthHeight + faceHeight*0.25;
  triangle (mouthLX/2,170, mouthRX+70, 170, width/2+70, mouthHX);
  
  fill(0);
  ellipse (eyeLX, eyePlace, eyeSize/2, eyeSize/2); 
  ellipse (eyeRX, eyePlace, eyeSize/2, eyeSize/2);
  
 
  
   faceWidth  = random (75,  150); 
  faceHeight = random (100, 200); 
  eyeSize    = random (10,  30); 
  mouthWidth = random (25, mouthHeight);
  mouthHeight = random (150, 225);
  eyePlace = random (100, 150);
}
 
void mousePressed(){
  red = int(random(0,256));
  blue = int(random(0,256));
  green = int(random(0,256));
 
}

Generating Darwin’s Galapagos Finches

BirdFaceGeneratorDarwinFinch

For the face generator project, I decided to create a program that generates finches, based off of the beak permutations found in Darwin’s finches of the Galapagos Islands (see images below). I pretty much eyeballed the parameters for the finches’ basic beak shapes, but I think this project would be worth revisiting with accurate mathematical data reflecting each beak’s dimensions. With regards to my completed program, I’d like to find a way to make the curvature of the beak less prominent in the smaller beak permutations.

Darwin's Finches Darwin's_finches_by_Gould

//Miranda Jacoby
//majacoby@andrew.cmu.edu
//EMS INTERACTIVITY SECTION A
//Copyright Miranda Jacoby 2014

//Variable Bird Faces

float headX = 25;
float headY = -50;
float headBeakAnchorX1 = random(100, 110);
float headBeakAnchorY1 = random(175, 200); //range of randdomness to atleast 200
float headBeakAnchorX2 = 150;
float headBeakAnchorY2 = 350; //Throat control. Currently unused, see headBeakAnchors

//Anchor the eye x and y pos to some dimension of the beak
float eyeX = 200 + headBeakAnchorX1/10;
float eyeY = 140 + headBeakAnchorY1/10;
float eyeH = 30;
float eyeW = 35;

float beakX = 0;
float beakY = 0;
float beakHeight = 100; //Currently unsued, see headbeakAnchors
float beakWidth = random(25, 60); //10 is a long beak, 100 is a short beak
float beakAnchorX = 200;
float beakAnchorY = 200;

void setup() {

  size(400, 400);
  //Values for messing about with tweak
  headX = 25;
  headY = -50;
  headBeakAnchorX1 = 99;
  headBeakAnchorY1 = 175; //range of randdomness to atleast 200
  headBeakAnchorX2 = 138;
  headBeakAnchorY2 = 333; //Currently unused, see headBeakAnchors
  beakHeight = 100; //Currently unsued, see headbeakAnchors
  beakWidth = 49; //25 is a long beak, 70 is a short beak
  beakAnchorX = 200;
  beakAnchorY = 200;
}

void draw() {



  background(255);

  //birdhead  
  noStroke();
  fill(0);
  beginShape();
  curveVertex(headX + 50, headY + 275);
  curveVertex(headX + 150, headY + 350);
  curveVertex(headX + 350, headY + 375);
  curveVertex(headX + 250, headY + 175);
  curveVertex(headX + headBeakAnchorX1, headY + headBeakAnchorY1); //Link this to the top of the beak
  curveVertex(headX + headBeakAnchorX2, headY + headBeakAnchorY2);
  curveVertex(headX + 200, headY + 400);
  endShape(CLOSE);
  
  //birdbody
  fill(0);
  ellipse(310, 340, 300, 250);

  //birdbeak
  //Change headbeakAnchors, subtract beakHeight from them
  fill(234, 188, 152);
  beginShape();
  vertex(beakX + beakAnchorX, beakY + beakAnchorY    );
  
  vertex(headX + headBeakAnchorX1, headY + headBeakAnchorY1);
  
  //curveVertex(819, 572);
    curveVertex(beakAnchorX + 639, beakAnchorY + 185);
    curveVertex(beakX + beakAnchorX, beakY + beakAnchorY    );
    curveVertex(beakX + beakWidth, beakY + beakAnchorY);
    curveVertex(beakAnchorX + 58, beakAnchorY + -43);
  //vertex(beakX + beakWidth, beakY + beakAnchorY    );
  
  
  //vertex(beakX + headBeakAnchorX2, beakY + headBeakAnchorY2);//(beakAnchorY + beakWidth/3));
  vertex(beakX + headBeakAnchorX2, beakY + (beakAnchorY + beakWidth/3));
  endShape(CLOSE);

  //Line seperating top and bottom of beak
  //Averages highest and lowest point, connects to beak tip and beak anchor
  stroke(245, 229, 210);
  strokeJoin(ROUND);
  strokeWeight(2);
  line(beakX + beakAnchorX, beakY + beakAnchorY, (beakWidth/2)+(headBeakAnchorX1 + headBeakAnchorX2)/2, (beakHeight/5) + (headBeakAnchorY1 + headBeakAnchorY2)/3 );
  line( (beakWidth/2) + (headBeakAnchorX1 + headBeakAnchorX2)/2, (beakHeight/5) + (headBeakAnchorY1 + headBeakAnchorY2)/3, beakX + beakWidth, beakY + beakAnchorY);
  noStroke();

  //birdeye
  fill(255);
  //Eye Ring
  ellipse(eyeX, eyeY, eyeW, eyeH);
  //Eye Iris
  fill(88, 48, 18);
  ellipse(eyeX, eyeY, eyeW - 5, eyeH - 5);
  //Eye Pupil
  fill(0);
  ellipse(eyeX, eyeY, eyeW - 20, eyeH - 15);
  //Highlight
  fill(255);
  ellipse(eyeX - 5, eyeY - 5, eyeW -28, eyeH -27);

  
}
////Make Bird's beak change randomly by clicking
void mousePressed(){
  
  headBeakAnchorX1 = random(100, 110);
  headBeakAnchorY1 = random(175, 220);
  beakWidth = random(35, 80);
  eyeX = 200 + headBeakAnchorX1/8;
  eyeY = 140 + headBeakAnchorY1/8;
}