Category: Section C

sketch

var faceWidth = 0.75;
var eyeColor1 = 100;
var eyeColor2 = 200;
var eyeColor3 = 100;
var eyebrowSlant = 0;
var mouthSlant = 0;

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

function draw()
{
  background(220);
  
  //Background of face
  strokeWeight(1);
  fill(255);
  ellipse(width/2, height/2, 300*faceWidth, 300);
  
  //Eye background
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);

  //Eye irises
  strokeWeight(0);
  fill( eyeColor1, eyeColor2, eyeColor3 );
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);

  //Eyebrows
  fill(0);
  triangle((width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)+(80*faceWidth)-(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);
  triangle((width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)-(80*faceWidth)+(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);

  //Mouth
  strokeWeight(3);
  noFill();
  if( mouthSlant == 0 )
  {
    line((width/2)+(80*faceWidth), (height/2)+60, (width/2)-(80*faceWidth), (height/2)+60);
  }
  else if( mouthSlant < 0 )
  {
    var posSlant = mouthSlant*-1;
    arc(width/2, (height/2)+60, 160*faceWidth, posSlant*2, PI, 0 );
  }
  else
  {
    arc(width/2, (height/2)+60, 160*faceWidth, mouthSlant*2, 0, PI ); 
  }
}

function mousePressed() 
{
  eyeColor1 = random(100,255);
  eyeColor2 = random(100,255);
  eyeColor3 = random(100,255);
  faceWidth= random(60,125) / 100;
  eyebrowSlant= random(-15,15);
  mouthSlant= eyebrowSlant * 3 * ((random(0,1)*2)-1);
}

I tried to make the variables interdependent to create a coherent face throughout variations. For example, the size of the eyes and mouth are dependent on the width of the face, and the eyebrows are always the same width as the eyes. The mouth can be upwards or downwards as can the eyebrows allowing for 5 expressions (neutral, smile, evil smile, angry, sad/afraid), however the intensity of the mouth slant will always correspond to the intensity of the eyebrow slant allowing for a coherent intensity of the expression.

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 175;
var faceHeight = 150;
var noseWidth = 50;
var noseHeight = 30;
var pupilX = 0;
var pupilY = 0;
var faceRedness = 190;
var noseRedness = 220;
var earSize = 50;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(255);

    //ears
    fill(noseRedness, 180, 184);
    ellipse(width / 2 - faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)
    ellipse(width / 2 + faceWidth / 3, height / 2 - faceHeight / 3, earSize, earSize)

    //face
    fill(faceRedness, 113, 166);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eyes
    fill(255);
    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);

    //pupils
    fill(0);
    ellipse(eyeLX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);
    ellipse(eyeRX + pupilX, height / 2 + pupilY, eyeSize * .65, eyeSize * .65);

    //nose
    fill(noseRedness, 180, 184);
    ellipse(width / 2, height / 2 + faceHeight / 4, noseWidth,noseHeight);


    //nostrils
    fill(0);
    var Lnostril = width / 2 - noseWidth / 4
    var Rnostril = width / 2 + noseWidth / 4
    ellipse(Lnostril, height / 2 + faceHeight / 4, 10, 10);
    ellipse(Rnostril, height / 2 + faceHeight / 4, 10, 10);

    //speech bubble
    fill(255);
    noStroke();
    rect(450, 75, 150, 125, 25);
    triangle(425, 250, 460, 195, 480, 195);

    //hamburger
    fill(255,201,77);
    arc(525, 125, 80, 60, PI, TWO_PI);
    fill(224,37,33);
    rect(485, 125, 80, 10, 15);
    fill(255,201,77);
    rect(485, 135, 80, 6, 15);
    fill(74,207,0);
    rect(485, 141, 80, 6, 15);
    fill(68,37,33);
    rect(485, 147, 80, 15, 15);
    fill(255,201,77);
    rect(485, 162, 80, 15, 0, 0, 15, 15);




}
 
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(150, 250);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseHeight = random(20,40);
    noseWidth = random(30,70);
    pupilX = random(-2,2);
    pupilY = random(-2,2);
    faceRedness = random(179,255);
    noseRedness = random(216,255);
    earSize = random(40,60);





}

This was hard because I don’t know how to draw faces. I ended up using simple circles to draw pigs, and made the eyes, nose, face color, and face size/shape change. I added a hamburger for fun.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-02

var eye = 10;
var pupil = 15;
var eyebrow = 1;
var eyelines = 0;
var n = 10; //n for nose
var ear = 1;
var lip = 0;
var ll = 1; //ll for lip length
var jaw = 1;
var chin = 10;
var skull = 1;
var eyebrowcolor = 1;
var lipcolor = 0;

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

function draw() {
    background(254, 247, 244);

    //Jaw Line
    noFill();
    stroke(1);
    beginShape();
    curveVertex(600*jaw, 400*jaw);
    curveVertex(500, 365);
    curveVertex(310, 380);
    curveVertex(300, 300);
    curveVertex(16*chin, 27*chin);
    endShape();

    //Lower Lip
    fill(222+lipcolor, 157+lipcolor, 160+lipcolor);
    beginShape();
    curveVertex(70, 100);
    curveVertex(350, 260);
    curveVertex(300, 300);
    curveVertex(300*ll, 280-lip);
    curveVertex(360, 270);
    endShape();

    //Upper Lip
    beginShape();
    curveVertex(180, 230);
    curveVertex(353, 270);
    curveVertex(300, 260);
    curveVertex(300*ll, 280-lip);
    curveVertex(350, 260);
    curveVertex(110, 140);
    endShape();
    
    fill(254, 247, 244);
    noStroke();
    triangle(350, 252, 329, 264, 360, 271);

    //Cupids Bow
    stroke(1);
    line(300, 260, 30.4*n, 24.0*n);

    //nose
    noFill();
    arc(30.8*n, 22.4*n, 30, 30, 100.3, 96);
    arc(29.1*n, 23.0*n, 70, 20, 120, 91);
    arc(26.9*n, 22.0*n, 40, 34, 90, 79.2);
    arc(25.2*n, 2.6*n, 7.0*n, 36.5*n, 102.05, 95.8);
    line(26.1*n, 20.2*n, 301, 148);

    //nose bridge
    arc(299, -34, 70, 365, 102.01, 95.8);
    
    //Top of Head
    arc(458, 151, 290, 300*skull, 3.29, 4);
    arc(454, 145, 300, 270*skull, 4, 6.5);

    //Back of Neck
    arc(782, 300, 400, 600, 90, 79.2);

    //jaw curve
    arc(490, 337.5, 80, 55, 100.33, 95.7);

    //front of neck
    arc(358, 595, 200, 430, 99, 97);

    //eye
    arc(35.5*eye, 14.4*eye, 45, 45, 90.5, 79.2);

    line(33.6*eye, 13.0*eye, 38.0*eye, (14.2*eye)+eyelines);
    line(33.7*eye, 15.6*eye, 38.0*eye, (14.2*eye)+eyelines);

    //pupil
    fill(100+pupil, 126+pupil, 35+pupil);
    ellipse(33.8*eye, 14.4*eye, 10, 18);
    fill(0);
    ellipse(33.4*eye, 14.4*eye, 5, 10);

    //ear
    noFill();
    arc(480*ear, 188*ear, 80, 95, 98.6, 96);
    arc(470*ear, 188*ear, 80, 75, 99, 94.3);

    //eyebrow
    fill(122/eyebrowcolor, 55/eyebrowcolor, 22/eyebrowcolor);
    noStroke();
    rect(335*eyebrow, 110*eyebrow, 30, 10);
    triangle(365*eyebrow, 110*eyebrow, 365*eyebrow, 120*eyebrow, 389*eyebrow, 125*eyebrow);
}

function mousePressed() {
    pupil = random(0, 100);
    eyebrow = random(.97, 1.03);
    eye = random(9.7, 10.5);
    eyelines = random(-4, 10);
    n = random(9.4, 10.6);
    ear = random(.94, 1.06);
    lip = random(-8, 9);
    ll = random(.97, 1.02);
    jaw = random(.84, 1.1);
    chin = random(6, 14);
    skull = random(.9, 1.06);
    eyebrowcolor = random(.5, 1.4);
    lipcolor = random(-40, 70);
}

Since I drew a face shown in the frontal view last week, I decided to try to draw the profile view for this assignment. My work began on a piece of paper to draw out the outline of the face (shown below). Then I brainstormed the different ways of which I could make the complex outline of the human profile utilizing code. I came to the conclusion that “curveVertex” would be useful in forming the jawline and lips, and I could use a combination of arcs and lines for the majority of the remainder.

I was inspired by the vast variations of faces we see everyday and I tried to emulate the uniqueness of each individual’s profile by changing features such as placement of the ear, placement of the eye, the strength of the jaw line, and many more. In order to emphasize the effect placement of facial features has on facial identification, hair was not necessary as it covers up the natural shape of the skull which contains a multitude of variations in itself. All in all, I am very satisfied with the product and how dramatically the face changes when clicked.

sketch

//Isadora Krsek
//Section B
//Ikrsek@andrew.cmu.edu
//Project-2

//face variables
var headWidth = 120
var headHeight = 140
var skinR = 230
var skinG = 168
var skinB = 150
var eyeR = (30);
var eyeG = (5);
var eyeB = (0);
var earR = (210);
var earG = (160);
var earB = (133);
var earWidth = (26);
var earHeight = (50);
var eyeWidth = (30);
var eyeHeight = (20);
var irisR = (35);
var irisG = (27);
var irisB = (40);
var irisWidth = (15);
var irisHeight = (18);
var blushR = (188);
var blushG = (119);
var blushB = (187);
var blushSize = (20);
var blushOpa = (150);
var noseR = (140);
var noseG = (90);
var noseB = (80);
var upLipR = (170);
var upLipG = (86);
var upLipB = (80);
var loLipR = (189);
var loLipG = (100);
var loLipB = (103);
var browR = (30);
var browG = (20);
var browB = (20);
//nose variables
var noseVertX3 = (2);
var noseVertX4 = (4);
var noseVertX6 = (4);
var noseVertY2 = (30)
var noseVertY3 = (6);
var noseVertY4 = (4);
var noseVertY6 = (6);
var noseVertY7 = (0);
//lip variables
//upper & lower
var v2 = (8);
var v3 = (6);
var v4 = (6);
var v5 = (8);
var v1andv4 = (4);
var v2andv3 = (1);
//just lower
var loLipY = (6);
//brow variables
var browVX2and4 = (10);
var browVX3 = (22);
var browVY2 = (10);
var browVY4 = (4);

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

function mom() {
    noStroke();
    angleMode(DEGREES);
  //hair back
    fill(23,21,28);
    ellipse(518,150,150,210);
    fill(188,216,220);
    rect(420,155,210,200);
  //ears
    fill(205,174,156);
    ellipse(462,142,25,45);
    ellipse(575,142,25,45);
  //complexion
    fill(220,191,168);
  //head
    ellipse(518,136,113,167);
  //hair bangs
    fill(255);
    stroke(255);
    //ellipse(500,50,5,5);
    //ellipse(518,85,5,5);
    
    stroke(23,21,28)
    fill(23,21,28);
    beginShape();
      curveVertex(500,55);
      curveVertex(514,85);
      curveVertex(533,96);
      curveVertex(570,98);
      curveVertex(540,52);
    
    endShape(CLOSE);
    noStroke();
  //blush 
    fill(233,208,187,172);
    ellipse(482,160,20,20);
    ellipse(552,160,20,20);
  //eye bags 
    fill(197,153,145);
    push();
    translate(487,132);
    rotate(176);
    ellipse(0,0,39,32);
    pop();
    push();
    translate(549,132);
    rotate(8);
    ellipse(0,0,39,32);
     pop();
  //eyes
    fill(240,220,216);
    push();
    translate(488,129);
    rotate(176);
    ellipse(0,0,30,18);
    pop();
    push();
    translate(548,129);
    rotate(8);
    ellipse(0,0,30,18);
    pop();
  //iris
    fill(35,7,0);
    ellipse(488,126,20,14);
    ellipse(548,126,20,15);
  //eyebrows: left, then right 
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(473,111); //outer base
     curveVertex(480,106); //triangle peak 
     curveVertex(502,112); // innermost point
     curveVertex(480,109)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(560,111);
     curveVertex(550,106);
     curveVertex(528,112);
     curveVertex(550,109);
    endShape(CLOSE);
  //nose
    beginShape();
     noFill();
     stroke(135,80,46);
     strokeWeight(3.2);
     vertex(508,130);
     vertex(508,170);
     vertex(514,176);
     vertex(520,172);
     vertex(523,170);
     vertex(523,165);
    endShape();
  //lips
    //upper
    beginShape();
     fill(164,98,76);
     stroke(164,98,76);
     strokeWeight(1);
     curveVertex(500,190);
     curveVertex(507,186);
     curveVertex(515,189);
     curveVertex(523,186);
     vertex(532,190);
    endShape(CLOSE);
    //lower
    beginShape();
     fill(194,115,95);
     stroke(194,115,95);
     strokeWeight(1);
     curveVertex(500,190);
     vertex(532,190);
     curveVertex(515,194);
    endShape(CLOSE);
}

function dad(){
    noStroke();
    //ears
    fill(212,152,133);
    ellipse(75,148,35,50);
    ellipse(226,148,35,50);
    //complexion
    fill(221,167,148);
    //head
    ellipseMode(CENTER);
    ellipse(150,150,152,170);
    //blush
    fill(188,119,112,150)
    ellipse(102,168,40,40);
    ellipse(192,168,40,40);
    //eyes
    fill(240,220,216);
    push();
    translate(112,135);
    rotate(4);
    ellipse(0,0,31,22);
    pop();
    push();
    translate(182,135);
    rotate(174);
    ellipse(0,0,31,22);
    pop();
    //iris
    fill(44,27,40);
    ellipse(182,133,15,18);
    ellipse(112,133,15,18);
    //eyebrows
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(93,123); //outer base
     curveVertex(105,106); //triangle peak 
     curveVertex(123,123); // innermost point
     curveVertex(105,120)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(200,123);
     curveVertex(185,106);
     curveVertex(170,123);
     curveVertex(185,120);
    endShape(CLOSE);
    //nose
    beginShape();
     noFill();
     stroke(164,93,83);
     strokeWeight(3.2);
     vertex(134,130);
     vertex(134,160);
     vertex(132,165);
     vertex(144,171);
     vertex(160,167);
     vertex(163,165);
     vertex(163,160);
    endShape();
    //lips
      //upper
    beginShape();
     fill(180,80,91);
     stroke(180,80,91);
     strokeWeight(1);
     curveVertex(130,190);
     curveVertex(137,182);
     curveVertex(145,185);
     curveVertex(153,182);
     vertex(162,190);
    endShape(CLOSE);
      //lower
    beginShape();
     fill(189,93,103);
     stroke(189,93,103);
     strokeWeight(1);
     curveVertex(130,190);
     vertex(163,190);
     curveVertex(155,200);
     curveVertex(139,200);
    endShape(CLOSE);
    //butt chin 
    stroke(164,93,83);
    strokeWeight(2);
    line(148,220,148,228);
    //glasses
    noFill();
    stroke(56);
    strokeWeight(3.1);
    ellipse(108,142,50,50);
    ellipse(185,142,50,50);
    curve(110,142,131,132,160,132,155,142);
      
    
}

function words(){
  textSize(30);
  fill(255)
  noStroke();
  text("Dad",122,275);
  text("Mom",490,270);
  textSize(24);
  text("..what I could've looked like...",180,474)
  
  
}

function draw() {
    var noseStartX = (width/2-5);
    var noseStartY = (height/1.3 - headHeight/7);
    var LipStartX = (width/2-15);
    var LipStartY = (height/1.3 + headHeight/4);
    var LeftBrowStartX = (width/2-46);
    var LeftBrowStartY = (height/1.4-headHeight/12);
    var RightBrowStartX = (width/2+46);
    var RightBrowStartY = (height/1.4-headHeight/12);
    
    mom();
    dad();
    noStroke();
    
    //OFFSPRING TIME
     //baby's ears
    fill(earR,earG,earB);
    ellipse(width/2-(headWidth/2),height/1.3,earWidth,earHeight); //left ear
    ellipse(width/2+(headWidth/2),height/1.3,earWidth,earHeight); //right ear 
     //baby's head
    fill(skinR,skinG,skinB);
    ellipse(width/2,height/1.3,headWidth,headHeight);
     //eyes 
    fill(240,220,216); //whites of the eyes
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),eyeWidth,eyeHeight); //left whites of the eyes
    ellipse(width/2+(headWidth/5),(height/1.3 - (headHeight/7)),eyeWidth,eyeHeight); //right whites of the eyes 
    fill(irisR,irisG,irisB); //iris color
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
    ellipse(width/2+(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
     //baby's cheeks
    fill(blushR,blushG,blushB,blushOpa);
    ellipse(width/2-(headWidth/5)-20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //left cheek 
    ellipse(width/2+(headWidth/5)+20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //right cheek 
     //baby's nose
    beginShape();
     noFill();
     stroke(noseR,noseG,noseB);
     strokeWeight(3.2);
     vertex(noseStartX,noseStartY);
     vertex(noseStartX,noseStartY+noseVertY2);
     vertex(noseStartX-noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4,noseStartY+noseVertY3+noseVertY4+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX6,noseStartY+noseVertY2);
    endShape();
     //baby's mouth
       //upper
    beginShape();
      fill(upLipR,upLipG,upLipB);
      stroke(upLipR,upLipG,upLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      curveVertex(LipStartX+v2,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3,LipStartY+v2andv3);
      curveVertex(LipStartX+v2+v3+v4,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3+v4+v5,LipStartY);
    endShape(CLOSE)
       //lower
    beginShape();
      fill(loLipR,loLipG,loLipB);
      stroke(loLipR,loLipG,loLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      vertex(LipStartX+v2+v3+v4+v5,LipStartY)
      curveVertex(LipStartX+v2+v3+v4,LipStartY+loLipY);
      curveVertex(LipStartX+v2,LipStartY+loLipY);
    endShape(CLOSE)
     //baby's eyebrows
       //left
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(LeftBrowStartX,LeftBrowStartY);
     vertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY2);
     curveVertex(LeftBrowStartX+browVX2and4+browVX3,LeftBrowStartY);
     curveVertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY4);
    endShape(CLOSE);
      //right
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(RightBrowStartX,RightBrowStartY);
     vertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY2);
     curveVertex(RightBrowStartX-browVX2and4-browVX3,RightBrowStartY);
     curveVertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY4);
    endShape(CLOSE);
  
    words();
}

function mousePressed(){
/*each of the ranges are based on the proportions/tones of 
the parents who bestow similarities to themselves onto their children*/
    background(188,216,220);
    headWidth = random(113,162);
    headHeight = random(137,170);
    //range for skin color
    skinR = random(220,221);
    skinG = random(167,191);
    skinB = random(148,170);
    //range for eye color
    eyeR = random(35-44);
    eyeG = random(7-27);
    eyeB = random(0-48);
    //range for ear color
    earR = random(205,212);
    earG = random(152,174);
    earB = random(133,156);
    //range for ear size
    earHeight = random(45,50);
    earWidth = random(25,35);
    eyeWidth = random(20,31);
    eyeHeight = random(18,22);
    //range for iris color
    irisR = random(35,80);
    irisG = random(7,27);
    irisB = random(0,40);
    //range for iris size 
    irisWidth = random(8,20);
    irisHeight = random(8,18);
    //range for blush color
    blushR = random(188,233);
    blushG = random(119,208);
    blushB = random(112,187);
    //range for blush size (the value will be the same for width and height bc it is a circle)
    blushSize = random(20,40);
    //range for opacity 
    blushOpa = random(140,172);
    //range for nose colors
    noseR = random(135,164);
    noseG = random(80,93);
    noseB = random(46,83);
    //range for nose sizes
    noseVertX3 = random(0,12);
    noseVertX4 = random(0,10);
    noseVertX6 = random(3,8);
    noseVertY2 = random(30,40)
    noseVertY3 = random(5,6) // + you add to vert y2
    noseVertY4 = random(0,6) // + you add to vert y3
    noseVertY6 = random(22,48)
    noseVertY7 = random(0,5)
    //range for upper lip colors 
    upLipR = random(164,180); 
    upLipG = random(80,98);
    upLipB = random(76,91);
    //ranger for upper lip sizes
    v1andv4 = random(1,8);
    v2andv3 = (.15,.5)
    //range for lower lip colors
    loLipR = random(189,194);
    loLipG = random(93,115);
    loLipB = random(95,103);
    //ranger for lower lip sizes
    loLipY = random(3,10);
    //range for brow colors 
    browR = random(23,80);
    browG = random(6,2);
    browB = random(2,28);
    //range for brow sizes
    browVX2and4 = random(7,22);
    browVX3 = random(18,22);
    browVY2 = random(5,17);
    browVY4 = random(3,4);
}   

I’ve always wondered about different ways I could’ve looked based on my parent’s appearances, and so I took the opportunity to simulate something like that in this project. I first took the time to draw out each of my parents in p5.js and then randomized the measurements of those characteristics so that everytime you click the mouse, another possibility appeared. Overall, I am mostly glad I don’t look like most of the “offspring” possibilities.