Category: SectionB

My Project

//sets up ability to make different backgrounds;
var backgroundSelector = 1;
//global variables for background 1 (morning) and 2 (night);
var cloudX1 = 100;
var cloudX2 = 300;
var cloudX3 = 180;
var cloudX4 = 220;
//sets up global variables for backround 2 (night);
var saucerX = 60;
var saucerY = 100;
var dir = 1;
var dirSaucer = 1;
//global variables for background 3 (evening);
var background3r = 231;
var background3g = 148;
var background3b = 20;
var sunY = 80;
var moonY = 720;
//sets up ability to make different face shapes;
var face = 1;
//sets up global variables for face shapes;
var rectWidth = 150;
var rectHeight = 250;
var circleRad = 300;
var ellipseWidth = 260;
var ellipseHeight = 320;
//sets up ability to use different Skin Tones;
var skinPreset = 0;
//sets up global variables for skin color;
var skinR = 224;
var skinG = 172;
var skinB = 105;
//sets up variables for facial features;
//creates initial x-coordinates of eyes that;
//fits all initial face shapes;
var leftEye = 195;
var rightEye = 285;
//sets up ability to have different Eye Colors;
var eyeColorPreset = 1;
//sets up global variables for Eye Colors;
var eyeColorR = 99;
var eyeColorG = 78;
var eyeColorB = 52;
//sets up global variables for noses;
var noseX2 = 220;
var noseY1 = 240;
var noseY2 = 340;
//sets up smile size;
var smileW = 20;
var smileH = 30;


function setup() {
    //I went with the Portrait Dimensions;
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    
    //changes the background between morning (1), night(2), and sunset(3 or almost 3);
    //morning background;
    if (backgroundSelector <= 1){
        background(135, 206, 235);
        noStroke();
        //creates clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX2, 90, 60, 30);
        ellipse(cloudX2+30, 105, 80, 30);
        ellipse(cloudX2+17, 105, 30, 60);
        ellipse(cloudX2+42, 105, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        rect(cloudX4, 130, 60, 30);
        ellipse(cloudX4+30, 145, 80, 30);
        ellipse(cloudX4+17, 145, 30, 60);
        ellipse(cloudX4+42, 145, 30, 60);
        //causes the Clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX2 = cloudX2 - 1.5;
        if (cloudX2 < -width){
            cloudX2 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
        cloudX4 = cloudX4 - 1.2;
        if (cloudX4 < -width){
            cloudX4 = width;
        }
        //creates sun;
        fill(252, 290, 77);
        circle(80, 80, 80);
    }
    //night background;
    else if (backgroundSelector > 1 & backgroundSelector <= 2){
        background(76, 64, 142);
        noStroke();
        //creates moon
        fill(244, 246, 240);
        circle(400, 80, 80);
        //creates saucer;
        fill(180, 229, 175);
        rect(saucerX, saucerY, 70, 20);
        fill(180);
        rect(saucerX+15, saucerY-10, 40, 10);
        rect(saucerX+15, saucerY+10, 40, 10);
        fill(180, 20, 30);
        rect(saucerX+5, saucerY+5, 5, 5);
        fill(20, 30, 180);
        rect(saucerX+60, saucerY+5, 5, 5);
        fill(224, 55, 45);
        quad(saucerX, saucerY+20, saucerX+10, saucerY+30, saucerX+60, saucerY+30, saucerX+70, saucerY+20);
        //causes saucer to move;
        saucerX = saucerX + (dir*1.7);
        if (saucerX > width){
            dir = -dir;
        }
        if (saucerX < -width){
            dir = -dir;
        }
        //causes the Saucer to move up and down cartoonishly;
        saucerY = saucerY - (dirSaucer*0.5);
        if (saucerY < 80){
            dirSaucer = -dirSaucer;
        }
        else if (saucerY > 120){
            dirSaucer = -dirSaucer;
        }
        //adds clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        //causes clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
    }
    //evening background;
    else if (backgroundSelector > 2 & backgroundSelector < 3){
        background(background3r, background3g, background3b);
        noStroke();
        //changes background to night and causes sun to go down;
        if (background3r != 76){
            background3r = background3r-1;
        }
        if (background3g != 64){
            background3g = background3g-1;
        }
        if (background3b != 142){
            background3b = background3b+1;
        }
        fill(252, 290, 77);
        circle(80, sunY, 80);
        if (sunY != 720){
            sunY = sunY + 4;
        }
        fill(244, 246, 240);
        circle(400, moonY, 80);
        if (moonY != 80){
            moonY = moonY - 4;
        }
    }
    //creates different skinPresets;
    if (skinPreset <= 1){
        skinR = 224;
        skinG = 172;
        skinB = 105;
    }
    else if (skinPreset > 1 & skinPreset <= 2) {
        skinR = 198;
        skinG = 134;
        skinB = 66;
    }
    else if (skinPreset > 2 & skinPreset <= 3) {
        skinR = 141;
        skinG = 85;
        skinB = 36;
    }
    else if (skinPreset > 3 & skinPreset <= 4) {
        skinR = 255;
        skinG = 219;
        skinB = 172;
    }
    //creates different eye colors;
    if (eyeColorPreset <= 1){
        eyeColorR = 99;
        eyeColorG = 78;
        eyeColorB = 52;
    }
    else if (eyeColorPreset > 1 & eyeColorPreset <= 2){
        eyeColorR = 46;
        eyeColorG = 83;
        eyeColorB = 111;
    }
    else if (eyeColorPreset > 2 & eyeColorPreset <= 3){
        eyeColorR = 61;
        eyeColorG = 103;
        eyeColorB = 29;
    }
    else if (eyeColorPreset > 3 & eyeColorPreset <= 4){
        eyeColorR = 28;
        eyeColorG = 120;
        eyeColorB = 71;
    }
    else if (eyeColorPreset > 4){
        eyeColorR = 73;
        eyeColorG = 118;
        eyeColorB = 101;
    }
    //creates different faceShapes and by extension, the faces;
    //each faceShape will also have features that are specific to it;
    //rectangle faceShape;
    if (face <= 1){
        fill(skinR, skinG, skinB);
        stroke(40);
        rect( ((width/2) - (rectWidth/2)), ((height/2) - (rectHeight/2) + 30), rectWidth, rectHeight);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //circle faceShape;
    else if (face > 1 & face <= 2){
        fill(skinR, skinG, skinB);
        stroke(40);
        circle(240, 380, circleRad);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 280, 40);
        circle(rightEye, 280, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 280, 20);
        circle(rightEye, 280, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileW, smileH, HALF_PI, PI);
    }
    //ellipse faceShape;
    else if (face > 2 & face < 3){
        fill(skinR, skinG, skinB);
        stroke(40);
        ellipse(240, 380, ellipseWidth, ellipseHeight);
        //creates eyes
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //creates pictureframe-like border;
    fill(160, 82, 45);
    stroke(160, 82, 45);
    rect(0, 0, 480, 10);
    rect(0, 630, 480, 10);
    rect(0, 10, 10, 620);
    rect(470, 10, 10, 620);
}

function mousePressed(){
    //randomly determines background, faceShape, skinPresets, and eyeColors;
    //also randomly determines faceShapeSize, Nose Size (through Coordinates);
    backgroundSelector = random(3);
    face = random(3);
    skinPreset = random(4);
    eyeColorPreset = random(5);
    circleRad = random(300, 420);
    ellipseWidth = (260, 310);
    ellipseHeight = (320, 400);
    rectWidth = random(150, 230);
    rectHeight = random(250, 330);
    noseX2 = random(180,230);
    noseY1 = random(240, 300);
    noseY2 = random(320, 420);
    smileW = random(20, 80);
    smileH = random(30, 50);

    //resets background 3 (evening) to initial conditions;
    background3r = 231;
    background3g = 148;
    background3b = 20;
    sunY = 80;
    moonY = 720;
}

I created this with about 8 hours of work. I had a lot of fun. However, the WordPress Posting was terrible.

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.

var eyeSpacing = 80;
var noseLength = 120;
var mouthWidth = 120;
var mouthHeight = 100;

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

function draw() {
    //head
    fill(255,255,255);
    ellipse(240,320,360,440);
    //eyes
    fill(0,0,0);
    ellipse(240+eyeSpacing, 300, 50, 80);
    ellipse(240-eyeSpacing, 300, 50, 80);
    //nose
    fill(255);
    triangle(240, 300, 200, 300+noseLength, 280, 300+noseLength);
    //mouth
    arc(240, 400, mouthWidth, mouthHeight, 0, PI, CHORD)

    //check for user input
    if(mouseIsPressed) {
      eyeSpacing = random(50,100);
      noseLength = random(40,80);
      mouthWidth = random(120,240);
      mouthHeight = random(100,200);
    }
}

Phew I think I uploaded this correctly! Honestly the hardest part of the assignment was figuring out how to do the HTML stuff. Although very simple, I like my final product since it’s always smiling at me 😀

//Patrick Fisher, section B

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColor = 2;
var mouthType = 1;
var noseType = 1;
var browLength = (1.15 * eyeSize);
var r = 0; //color value for eyebrows
var m = 1; //coefficent for for size of mouth and nose
var skinColor = 1;

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

function draw() {
    var midX = width / 2; //intermediate varriable for half the canvas length
    background(180);
    
    if(skinColor == 1){ //chooses a variety of skin colors from paper white to dark brown
        strokeWeight(1);
        fill(255);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 2){
        strokeWeight(1);
        fill(254, 219, 117); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 3){ 
        strokeWeight(1);
        fill(241, 194, 125);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 4){ 
        strokeWeight(1);
        fill(224, 172, 105); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 5){ 
        strokeWeight(1);
        fill(198, 134, 66); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 6){
        strokeWeight(1);
        fill(140, 85, 36); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 7){
        strokeWeight(1);
        fill(54, 30, 2);        
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    }

    var eyeLX = midX - faceWidth * 0.25; //variable for x position of left eye
    var eyeRX = midX + faceWidth * 0.25; //wariable for x position of left eye
    var eyeBrowL = (eyeLX - (.65 * eyeSize)); //variable for left eyebrow x position based off of left eye position
    var eyeBrowR = (eyeRX - (.5 * eyeSize)); //wariable for right eyebrow x position based off of the right eye position
    strokeWeight(1);
    fill(r);
    rect(eyeBrowL, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //left eyebrow
    
    strokeWeight(1);
    fill(r);
    rect(eyeBrowR, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //right eyebrow
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //creates left eye
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //creates right eye

    if(eyeColor == 1){ //makes brown irises       
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
    
    }    else if(eyeColor == 2){   //makes green irises     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 3){   //makes blue irises     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 4){   //makes heterochromia, brown right blue left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 5){   //makes heterochromia, blue right brown left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 6){   //makes heterochromia, blue right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }   else if(eyeColor == 7){   //makes heterochromia, green right blue left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 8){   //makes heterochromia, brown right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 9){   //makes heterochromia, green right brown left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }
    //variables for positioning and drawing the mouth
    var mouthWidth = (faceWidth * (1/3));
    var mouthHeight = (faceHeight * .25);
   //intermediate variables for the x,y coordiantes for the tirangle nose type
    var tx1 = midX;
    var ty1 = ((height / 2) - (faceHeight / 16));
    var tx2 = (midX - (faceWidth / 8));
    var ty2 = ((height / 2) + (faceHeight / 6))
    var tx3 = (midX + (faceWidth / 8));
    var ty3 = ((height / 2) + (faceHeight / 6));

    if(mouthType == 1){
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .25)), mouthWidth, mouthHeight, m * TWO_PI, m * PI); //creates a smiling mouth

    } else if(mouthType == 2){ //creates a frowning mouth
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .375)), mouthWidth, mouthHeight, m * PI, m * TWO_PI,);

    } else if(mouthType == 3) { //creates a neutral line mouth
        
        strokeWeight(3);
        line(m * (midX - (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)), m * (midX + (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)));
    }
    
    if(noseType == 1){ //creates a half circle nose
        strokeWeight(1);
        fill(255);
        arc(((width * (51/100))), (height * (51/100)), (faceWidth / 4), (faceHeight / 6), m * HALF_PI, m * PI + HALF_PI);
    }

    else if(noseType == 2){ //creates a triangle nose
        strokeWeight(1);
        fill(255);
        triangle(tx1, ty1, m * tx2, ty2, m * tx3, ty3);
    }

    else if(noseType == 3){ //creates a line nose
        
        strokeWeight(3);
        line(midX, m * ((height / 2) + (faceHeight / 8)),midX, ((height / 2) - (faceHeight / 8)));
    }

}

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(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    browLength = random((eyeSize * .95), (eyeSize * 1.35));
    eyeColor = floor(random(1,10)); //chooses one of the eye color combinations
    mouthType = floor(random(1,4)); //choose the mouth type
    noseType = floor(random(1,4));  //chooses the nose type
    r = random(255); //changes eyebrow color
    m = (random(.95,1.05));
    skinColor = floor(random(1,8)); //changes the skin color

}

I had a lot of fun with this project. It was interesting trying to come up with more and more ways to make the face different. One of my early troubles was a problem with my eye colors. I was using “if(eyeColor == x)…” and eyeColor = “random(1,10)” but most clicks would end with no irises at all. I then realized the problem was that random() gives a floating point number and I was asking for a specific integer, so the odds of getting one were super low, so I changed the line to “floor(random(1,10))” which thankfully fixed it.

var faceWidth = 250;
var faceHeight = 250;
var faceColorR = 30;
var faceColorG = 20;
var faceColorB = 80;
var randomEars = 0;
var randomEyes = 0;
var randomNose = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var eyeColorR = 252;
var eyeColorG = 230;
var eyeColorB = 33;


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

function draw() {
    //face
    background(206, 219, 240); //light blue for background
    fill(faceColorR, faceColorG, faceColorB); //color of face
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //face

    //ears (randomly pick ears)
    if (randomEars <= 1){ //round ears
        circle(width/3, height/3, 60); //left round ears
        circle(width - (width/3), height/3, 60); //right round ears

    } else if (randomEars <= 2) { //triangle ears
        triangle(190, 130, 260, 152 , 220, 200); //left triangle ears
        triangle(450, 130, 380, 152, 420, 200); //right triangle ears

    } else { //curved down ears
        beginShape(); //left curved down ears
        curveVertex(200, 210);
        curveVertex(210, 230);
        curveVertex(170, 180);
        curveVertex(270, 137);
        curveVertex(290, 240);
        endShape();

        beginShape(); //right curved down ears
        curveVertex(440, 210);
        curveVertex(430, 230);
        curveVertex(470, 180);
        curveVertex(370, 137);
        curveVertex(350, 240);
        endShape();
    }
    

    //eyes (randomly pick eyes)
    if (randomEyes <= 1){ //round eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(280, 230, eyeWidth, eyeHeight); //left black part of round eyes 
    fill(255, 255, 255);
    ellipse(280, 236, 15, 17); //left white part of round eyes
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(360, 230, eyeWidth, eyeHeight); //right black part of round eyes 
    fill(255, 255, 255);
    ellipse(360, 236, 15, 17); //right white part of round eyes
    
    } else if (randomEyes <= 2){ //line eyes
    fill(0, 0, 0); //black
    rect(260, 230, 30, 5); //left line eyes
    rect(350, 230, 30, 5); //right line eyes
    
    } else { //reptile eyes
    fill(0, 0, 0); //black 
    circle(275, 230, 50); //left black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(275, 230, 5, 50); //left inside part of reptile eyes
    fill(0, 0, 0); //black 
    circle(365, 230, 50); //right black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(365, 230, 5, 50); //right inside part of reptile eyes
    }
    

    //nose (randomly pick nose)
    fill(faceColorR + 50, faceColorG + 35, faceColorB + 10); //nose color slightly darker than face color
    
    if (randomNose <= 1) { //pig snout
    ellipse(width/2, height/2 + 30, 70, 40); //pig snout outside
    ellipse(width/2 -10, height/2 +30, 8, 15); //pig snout left nostril
    ellipse(width/2 +10, height/2 +30, 8, 15); //pig snout right nostril
    
    } else if (randomNose <= 2) { //triangle nose
    triangle(width/2 - 10, height/2 + 30, width/2 + 10, height/2 + 30, width/2, height/2 + 45); //triangle nose
    
    } else { //curvy mouth + whiskers
    fill(faceColorR, faceColorG, faceColorB);
    arc(width/2 - 10, height/2 + 50, 20, 20, 0, radians(200)); //curvy mouth left
    arc(width/2 + 10, height/2 + 50, 20, 20, radians(-20), PI); //curvy mouth right
    fill(0, 0, 0); //black 
    line(240, 270, 180, 240); //left top whisker
    line(400, 270, 460, 240); //right top whisker
    line(240, 275, 175, 275); //left middle whisker
    line(400, 275, 465, 275); //right middle whisker
    line(240, 280, 180, 310); //left bottom whisker
    line(400, 280, 460, 310); //right bottom whisker
    }
  
}

function mousePressed(){
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    faceColorR = random(80, 170);
    faceColorG = random(50, 150);
    faceColorB = random(60, 200);
    randomEars = random(0, 3);
    randomEyes = random(0, 3);
    randomNose = random(0, 3);
    eyeWidth = random(20, 35);
    eyeHeight = random(30, 38);
    eyeColorR = random(185, 220);
    eyeColorG = random (190, 235);
    eyeColorB = random (130, 250);
}

The most interesting part of the project was testing out the code and seeing how the facial features change and create unique combinations. However, I did find it a bit challenging and time-consuming to design each of the variations.