Variable Faces

sketch

//Yanina Shavialenka
//Section B

var flipped = false;

var hairLength = 260;

var mouthShape = 0;
var mouthY = 350;
var mouthX = 330;
var mouthWidth = 105;
var mouthHeight = 70;

var eyeBrowsXL = 270;
var eyeBrowsXR = 390;
var eyeBrowsWidth = 90;
var eyeBrowsHeight = 40;
var eyebrowY = 235;
var rEyebrows = 82;
var gEyebrows = 60;
var bEyebrows = 7;

var rShirt = 107;
var gShirt = 142;
var bShirt = 35;

var rEyes1 = 0;
var gEyes1 = 0;
var bEyes1 = 255;

var rEyes2 = 30;
var gEyes2 = 144;
var bEyes2 = 255;

var earXR = 455;
var earXL = 203;
var earY = 283;
var earWidth =60;
var earHeight = 100;

var earringXL = 195;
var earringXR = 462;
var earringY = 325;
var earringWidth = 2;
var earringHeight = 15;

var earringLongXR = 458;
var earringLongXL = 191;
var earringLongY = 335;
var earringLongWidth = 10;
var earringLongHeight = 25;

var studSmallX = 478;
var studBigX= 472;
var studSmallY = 302;
var studBigY = 310;
var studSmallWidth = 4;
var studBigWidth = 6;
var studBSmallHeight = 4;
var studBigHeight = 6;

var faceX = 330;
var faceY = 250;
var faceWidth = 280;
var faceHeight = 330;

var  bangsXL = 250;
var bangsXR = 415;
var bangsY = 160;
var bangsWidth = 120;
var bangsHeight = 80;

var eyeXL = 270;
var eyeXR = 390;
var eyeY = 255;
var eyeWidth = 65;
var eyeHeight = 55;

var eyeXL1 = 270;
var eyeXR1 = 390;
var eyeY1 = 255;
var eyeWidth1 = 50;
var eyeHeight1 = 50;

var reflectionBigX = 273;
var reflectionBigY = 252;
var reflectionBigWidth = 8;
var reflectionBigHeight = 8;

var reflectionSmallX = 393;
var reflectionSmallY = 252;
var reflectionSmallWidth = 4;
var reflectionSmallHeight =4;

var glassesXL = 270;
var glassesXR = 390;
var glassesY = 255;
var glassesWidth = 90;
var glassesHeight = 80;

var noseX = 330;
var noseY = 315;
var noseWidth = 35;
var noseHeight = 40;

var tX1 = 280;
var tY1 = 450;
var tX2 = 325;
var tY2 = 500;
var tX3 = 280;
var tY3 = 500;

var tXX1 = 325;
var tYY1 = 500;
var tXX2 = 370;
var tYY2 = 450;
var tXX3 = 370;
var tYY3 = 500; 

var tXXX1 = 475;
var tYYY1 = 450;
var tXXX2 = 575;
var tYYY2 = 550;
var tXXX3 = 475;
var tYYY3 = 550;

var tXXXX1 = 175;
var tYYYY1 = 450;
var tXXXX2 = 70;
var tYYYY2 = 550;
var tXXXX3 = 175;
var tYYYY3 = 550;

var rectX1 = 370;
var rectX2 = 175;
var rectY = 450;
var rectWidth = 105;
var rectHeight = 150;

function setup() {
   createCanvas(640, 480);
   background(65, 105, 225);
   text("p5.js vers 0.9.0 test.", 10, 15);  
}

function draw() {
   background(5, 105, 225);
   noStroke(30, 144, 255);
   fill(30, 144, 255);
   rect(width/8-30, height/10+2, width-100, height-100);

   noStroke();
   fill(100, 149, 237, 130);
   rect(width/6.4, height/4.8, width-200, height-200);

   noStroke();
   fill(135, 206, 250, 50);
   rect(width/4-10, height/3-10, width-300, height-300);

   noStroke();
   fill(176, 196, 222, 50);
   rect(width/4+4*10, height/2-4*10, width-400, height-400);

   noStroke();
   fill(240, 248, 255, 20);
   rect(width/2-10*2, height/2-10*2, width-500, height-440);

   //Hair
   noStroke();
   fill(160, 82, 45);
   rect(width/5+30, height/2-10*4, width-300, hairLength);
   ellipse(width/2+8, height/3+10*3, width-300, height-200);

   //Neck
   noStroke();
   fill(255, 218, 185);
   rect(width/2-10*4+2, height-10*8, width/8+10, height/4.8);

   //Ears
   stroke(1);
   fill(255, 218, 185);
   arc(earXR, earY, earWidth, earHeight, PI, PI, CHORD);
   arc(earXL, earY, earWidth, earHeight, PI, PI, CHORD);

   //Earrings
   stroke(1);
   fill(211, 211, 211);
   rect(earringXL, earringY, earringWidth, earringHeight);
   rect(earringXR, earringY, earringWidth, earringHeight);
   fill(192, 192, 192);
   ellipse(width/4+36, height/1.5, width/64, height/48);
   ellipse(width/1.6+10*6+3, height/1.5, width/64, height/48);
   rect(earringLongXL, earringLongY, earringLongWidth, earringLongHeight);
   rect(earringLongXR, earringLongY, earringLongWidth, earringLongHeight);

   //studs
   ellipse(studBigX, studBigY, studBigWidth, studBigHeight);
   ellipse(studSmallX, studSmallY, studSmallWidth, studBSmallHeight);

   //Face
   stroke(1);
   fill(255, 218, 185);
   ellipse(faceX, faceY, faceWidth, faceHeight);

   //Hair(Bangs)
   noStroke();
   fill(160, 82, 45);
   ellipse(330, 130, 200, 150);
   ellipse(bangsXL, bangsY, bangsWidth, bangsHeight);
   ellipse(bangsXR, bangsY, bangsWidth, bangsHeight);

   //Eyes(Shape)
   stroke(1);
   fill(255, 255, 255);
   ellipse(eyeXL, eyeY, eyeWidth, eyeHeight);
   ellipse(eyeXR, eyeY, eyeWidth, eyeHeight);

   //Eyes(Color)
   noStroke();
   fill(rEyes1, gEyes1, bEyes1, 170);
   ellipse(eyeXL1, eyeY1, eyeWidth1, eyeHeight1);
   ellipse(eyeXR1, eyeY1, eyeWidth1, eyeHeight1);

   //Eyes(Color)
   noStroke();
   fill(rEyes2, gEyes2, bEyes2, 100);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15, eyeHeight-15);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15, eyeHeight1-15);

   //Eyes(Pupils)
   noStroke();
   fill(0, 0, 0);
   ellipse(eyeXL1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);
   ellipse(eyeXR1, eyeY1, eyeWidth1-15*2, eyeHeight1-15*2);

   //Eyes(Reflection)
   noStroke();
   fill(255, 255, 255);
   ellipse(reflectionBigX, reflectionBigY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionBigX+6, reflectionBigY+6, reflectionSmallWidth, reflectionSmallHeight);
   ellipse(reflectionSmallX, reflectionSmallY, reflectionBigWidth, reflectionBigHeight);
   ellipse(reflectionSmallX+6, reflectionSmallY+6, reflectionSmallWidth, reflectionSmallHeight);

   //Eyebrows
   fill(rEyebrows, gEyebrows, bEyebrows);
   arc(eyeBrowsXL, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI, PI + HALF_PI + QUARTER_PI, CHORD);
   arc(eyeBrowsXR, eyebrowY, eyeBrowsWidth, eyeBrowsHeight, PI + QUARTER_PI, 2*PI, CHORD);

   //Glassses
   stroke(1);
   fill(240, 248, 255, 100);
   ellipse(glassesXL, glassesY, glassesWidth, glassesHeight);
   ellipse(glassesXR, glassesY, glassesWidth, glassesHeight);

   line(width/2-5, height/2+5*3, width/2+5*5, height/2+5*3);
   line(width/1.6+5*7, height/2+5*3, width/1.6+10*7, height/2);
   line(width/2.5-3*10-2, height/2+5*3, width/4+3*10+1, height/2-1);

   //Mouth
   noStroke();
   fill(205, 92, 92);
   arc(mouthX, mouthY, mouthWidth, mouthHeight, mouthShape, mouthShape+PI, CHORD);

   //Nose
   noStroke();
   fill(228, 167, 187);
   arc(noseX, noseY, noseWidth, noseHeight, PI, 2*PI, PIE);

   //Tshirt
   stroke(1);
   fill(rShirt,gShirt,bShirt);
   line(width/2-10*4, height-10*3, width/2+5, height+20);
   line(width/2+5, height+20, width/2+5*10, height-10*3);
   line(width/2-10*4, height-10*3, width/4+5*3, height-10*3);
   line(width/4+5*3, height-10*3, width/8 + 2*5, height*1.1+30);
   line(width/2+5*10, height-10*3, width-165, height-10*3);
   line(width-165, height-10*3, width-3*20, height*1.1 + 2*13);
   
   noStroke();
   triangle(tX1, tY1, tX2, tY2, tX3, tY3);
   triangle(tXX1, tYY1, tXX2, tYY2, tXX3, tYY3);
   triangle(tXXX1, tYYY1, tXXX2, tYYY2, tXXX3, tYYY3);
   triangle(tXXXX1, tYYYY1, tXXXX2, tYYYY2, tXXXX3, tYYYY3);
   rect(rectX1, rectY, rectWidth, rectHeight);
   rect(rectX2, rectY, rectWidth, rectHeight);

}

function mousePressed() {
   hairLength = random(100, 280);

   flipped =! flipped; 
      if(flipped) {
         mouthShape += PI;
         mouthY = 380;
      }
      else {
        mouthShape -= PI;
        mouthY = 350;
      }
      
   rShirt = random(255);
   gShirt = random(255);
   bShirt = random(255);

   rEyes1 = random(255);
   gEyes1 = random(255);
   bEyes1 = random(255);

   rEyes2 = random(255);
   gEyes2 = random(255);
   bEyes2 = random(255);

   rEyebrows = random(255);
   gEyebrows = random(255);
   bEyebrows = random(255);

   eyebrowY = random(210, 245);
}

I used my Self-Portrait from the previous assignment to make this Face Variables such as I randomly change the length of the hair, color of the eyes/eyebrows/shirt. The hardest part for me was to change the colors because I had trouble figuring out how it works.