Month: September 2020

Project 1 – Self Portrait

sketch
function setup() {
    createCanvas(500, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(230);

	strokeWeight(10);
	stroke(0);
	fill(208, 173, 167);
	rect(0, 0, 250, 250);
	fill(173, 106, 108);
	circle(125, 125, 250);
	fill(106, 123, 118);
	rect(250, 0, 250, 250);
	fill(58, 78, 72);
	circle(375, 125, 250);
	fill(106, 123, 118);
	rect(0, 250, 250, 250);
	fill(58, 78, 72);
	circle(125, 375, 250);
	fill(208, 173, 167);
	rect(250, 250, 250, 250);
	fill(173, 106, 108);
	circle(375, 375, 250);
	//background pattern

	strokeWeight(10);
	noFill();
	stroke(0);
	rect(0, 0, 500, 500);
	//border

	noStroke();
	fill(0);
	rect(117, 112, 266, 240);
	arc(250, 350, 266, 210, 0, PI);
	//face border

	noStroke();
	
	fill(232, 214, 203);
	rect(125, 120, 250, 230);
	fill(232, 214, 203);
	arc(250, 350, 250, 200, 0, PI);
	//face shape

	strokeWeight(8);
	stroke(0);
	fill(173, 160, 151);
	arc(375, 310, 70, 80, radians(270), HALF_PI);
	arc(125, 230, 70, 80, HALF_PI, radians(270));
	//ears

	fill(4, 3, 3);
	arc(193.5, 120, 145, 130, PI, 0);
	arc(338.5, 120, 145, 130, 0, PI);
	//hair

	line(117, 116, 415, 116);
	line(121, 112, 121, 270);
	line(379, 200, 379, 350);
	//hair border, ear border


	strokeWeight(8);
	stroke(0);
	strokeCap(SQUARE);
	line(250, 225, 250, 350);
	//nose line

	noFill();
	arc(200, 225, 100, 70, PI, 0);
	//eyebrows

	line(200, 385, 300, 385);
	//mouth

	strokeWeight(3);
	arc(250, 415, 30, 12, PI, 0);
	arc(195, 385, 10, 15, HALF_PI, radians(270));
	arc(305, 385, 10 ,15, radians(270), HALF_PI);
	//features

	fill(37, 23, 26);
	circle(190, 250, 25);
	triangle(250, 348.5, 215, 348.5, 250, 280);
	//left eye, nose

	noFill();
	strokeWeight(8);
	stroke(0);
	circle(310, 250, 25);
	//right eye








}

Profile

#Selfie

PortraitDownload
function setup() {
  createCanvas(500, 500);
  background(224, 212, 189);
  strokeWeight(4)
}
 
 function draw() {

 	 
//Back Bangs
   fill(94, 62, 44); //brown
   arc(316, 100, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, OPEN);
   arc(306, 110, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, CHORD);

  
//Face (Skin)  
    fill(244, 202, 189); //skin color
    quad(331, 148, 375, 196, 323, 250, 288, 160)
    quad(366, 218, 366, 250, 331, 313, 323, 218)
    ellipse(245, 128, 180, 142);
    ellipse(350, 300, 45, 45);
    ellipse(363, 246, 18, 18);
    ellipse(371, 207, 22, 22);
    rect(158, 150, 173, 175);
    arc(260, 246, 160, 160,  PI + HALF_PI, HALF_PI, CHORD);
  
//Back of Hair
    fill(94, 62, 44); //brown
 	rect(90, 110, 115, 400);
   
   
//Eye
   fill(255,255,255);          //white
   triangle(284, 178, 308, 166, 308, 181);
   fill(0);          //black
   ellipse(308, 173, 5, 15);
   arc(309, 160, 16, 14, TWO_PI, HALF_PI, OPEN);
 
//Nose
   fill(255,255,255); //white
   arc(355, 218, 33, 33,  PI, TWO_PI, CHORD);
   fill(244, 202, 189);
   ellipse(345, 220, 14, 14);
   
//Lips
   fill(226, 102, 107);          //coral
   triangle(341, 268, 365, 255, 367, 249);
   triangle(340, 270, 358, 260, 359, 278);
   ellipse(361, 268, 15, 15);
 
// Shirt
   fill(18);
   ellipse(220, 495, 400, 240);
   ellipse(80, 490, 200, 200);
   
//HAIR
    
  //Behind Top Of Head
      fill(94, 62, 44); //brown
      ellipse(172, 110, 244, 154);
   
   // Quad below lower hair (aka extensions)
       quad(164, 316, 128, 412, 210, 443, 260,322);
   
  
    //Ringlet 1 (right center)
        arc(200, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(190, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(180, 200, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


    //Ringlet 2 (bottom left)
       arc(100, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(120, 350, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 3 (bottom left right side)
       arc(130, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(140, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(150, 440, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 4 (right middle)
       arc(220, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(210, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(200, 350, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 5 (right upper)
        arc(140, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(130, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
        arc(120, 290, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 6 (lowest)
       arc(170, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(160, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(150, 480, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


    //Ringlet 7 (bottom left up one)
       arc(90, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(100, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 220, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 8 (top crown left)
       arc(100, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);
       arc(110, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);
       arc(120, 100, 142, 110, HALF_PI, PI + HALF_PI, OPEN);


    //Ringlet 9 (right)
       arc(140, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(130, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(120, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);

    //Ringlet 10 (center)
       arc(140, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(150, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);
       arc(160, 240, 142, 142, HALF_PI, PI + HALF_PI, OPEN);

    //Ringlet 11 (top right)
       arc(140, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(130, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);
       arc(120, 140, 142, 142, PI + HALF_PI, HALF_PI, OPEN);


             //BANGS
               arc(280, 100, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, OPEN);
               arc(270, 110, 142, 142, PI + QUARTER_PI, TWO_PI + QUARTER_PI, CHORD);
 
  
 }

Project 1 – Self Portrait

tateportrait
function setup() {
    createCanvas(1000, 1000);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(164,138,187);
	//shirt
	noStroke();
	fill(58,101,244);
	ellipse(500,1000,800, 600);
	//collar
	noStroke(); 
	fill(160,160,160);
	rect(450,700,100,450);
	//neck
	noStroke();
	fill(161,118,72);
	ellipse(500,700,300,350);
	//left ear
	noStroke();
	fill(216,160,107);
	ellipse(250,500,75,150);
	//right ear
	noStroke();
	fill(216,160,107);
	ellipse(750,500,75,150);
	//beard
	noStroke();
	fill(184,137,86);
	ellipse(500,500,500,600);
	//hair
	noStroke(); 
	fill(103,78,54);
	ellipse(500,400,500,400);
	//face
	noStroke();
	fill(216,160,107);
	ellipse(500,475,475,300);
	//nose
	noStroke(); 
	fill(196,143,93);
	rect(475,480,50,125);
	//lips
	noStroke();
	fill(185,94,75);
	ellipse(500,670,140,40);
	//left eybrow
	noStroke(); 
	fill(103,78,54);
	rect(360,445,100,25);
	//right eybrow
	noStroke(); 
	fill(103,78,54);
	rect(540,445,100,25);
	//left eye
	noStroke(); 
	fill(255,255,255);
	ellipse(410,505,65,23);
	//right eye
	noStroke(); 
	fill(255,255,255);
	ellipse(590,505,65,23);
	//left pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(410,505,23,23);
	//right pupil
	noStroke(); 
	fill(58,101,244);
	ellipse(590,505,23,23);
}

Project 1 – Self Portrait

How I was feeling that week.

self portraitDownload
function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (130, 130, 130);
    noStroke();
    fill('#4d6a7b') //blue
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 40);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    rect(random(0, 600), random(0, 600), 3, 20);    //rain
    fill(255, 255, 255);
	ellipse(300, 184, 266, 211);   //hat
    triangle(182, 64, 185, 134, 227, 96);   //ear
    triangle(600-182, 64, 600-185, 134, 600-227, 96);   //ear
    fill('#000000');
    ellipse(300, 224, 174, 164);    //head
    rect(213, 227, 174, 144);   //hair
    fill('#ddb88d')
    rect(246, 206, 105, 112);   //face
    ellipse(299, 304, 127, 58); //cheeks
    rect(288, 325, 22, 35); //neck
    fill('#bb7522')
    ellipse(300, 449, 143, 203);    //shirt
    fill('#ddb88d')
    rect(230, 424, 25, 124);    //left arm
    rect(345, 424, 25, 124);    //right arm
    fill('#000000');
    triangle(239, 205, 363, 182, 363, 242);     //fringe
    ellipse(273, 269, 9, 21);   //left eye
    ellipse(325, 269, 9, 21);   //right eye
    stroke(0, 0, 0);
    strokeWeight(3);
    line(288, 300, 310, 300);   //mouth
    noStroke();
    fill('#f69180');
    ellipse(259, 295, 21, 10);  //deimple1
    ellipse(336, 295, 21, 10);  //deimple2
    fill('#752516');    //red
    triangle(288, 428, 318, 428, 300, 460);     //fox pattern1
    triangle(288, 428, 285, 418, 298, 428);     //fox pattern2
    triangle(306, 428, 321, 418, 318, 428);     //fox pattern3
    fill('#4d6a7b') //blue
    rect(0,517, 600, 83);   //puddle




}

Project 1 – Self Portrait

selfportrait
function setup() {
    createCanvas(800, 800);
    background(255);
}

function draw() {
	
	noStroke();
	fill(0);
	ellipse(400, 300, 500); //hair circle
	
	rect(150, 300, 500, 300); //hair box

	fill(255, 242, 230);
	ellipse(400, 350, 400, 450); //face

	fill(0);
	triangle(410, 115, 210, 145, 195, 350);
	triangle(390, 115, 590, 145, 605, 350);
	
	stroke(0);
	strokeWeight(4);
	fill(243, 118, 86);
	ellipse(400, 450, 130, 130); //mouth

	noStroke();
	fill(255, 242, 230); 
	rect(325, 380, 150, 70); //mouth cover

	stroke(0);
	line(335, 450, 465, 450); //mouth line

	line(390, 380, 390, 390); //nose lines
	line(410, 380, 410, 390);

	fill(255);
	//ellipse(315, 330, 75, 35);
	//ellipse(485, 330, 75, 35);
	fill(0);
	circle(315, 330, 20); //eyes
	circle(485, 330, 20);
	strokeWeight(20);
	line(340, 300, 300, 285);
	line(460, 300, 500, 285); //eyebrows

	noStroke();
	fill(249,185,169);
	ellipse(300, 382, 75, 32);
	ellipse(500, 382, 75, 32);
	
}

Project 1 – Self Portrait

This is my self portrait

Portrait
function setup() {
    createCanvas(300, 300);
    background(81, 170, 223);
    
}

function draw() {
	noStroke();
	//sky
	//fill(255, 255, 255);
	//circle(30, 40, 30);
	//rect(30, 25, 80, 30);
	//circle(110, 40, 30);
	//circle(80, 20, 30);
	//rect(80, 5, 80, 30);
	//circle(160, 20, 30);
	//circle(200, 30, 30);
	//rect(200, 15, 80, 30);
	//circle(280, 30, 30);
	//Ear
	//80 Down
	fill(244, 195, 162);
	ellipse(200, 140, 10, 20);
	//Head
	//80 Down
	rect(100, 80, 100, 120);
	//Neck
	//200 Down
	rect(140, 200, 20, 60);
	//Body
	//260 Down
	fill(79, 106, 230);
	rect(90, 260, 120, 40);
	//Top of Hair
	fill(247, 227, 131);
	rect(100, 80, 100, 20);
	//Left Side of Hair
	rect(100, 100, 10, 20);
	//Right Side of Hair
	rect(190, 100, 10, 20);
	//Right Eye
	fill(255, 255, 255);
	ellipse(115, 145, 20);
	//Left Eye
	ellipse(175, 145, 20);
	//Eyes Cont.
	fill(0, 0, 0);
	ellipse(112, 145, 10);
	ellipse(172, 145, 10);
	//Nose
	fill(200, 140, 120);
	triangle(140, 150, 145, 170, 135, 170);
	//mouth
	rect(110, 180, 30, 15);


}

Project 1 – Self Portrait

This is what I look like when I am sad…

sad-portrait 
let r;
    g;
    b;

function setup() {
    createCanvas(600, 600);
     background(255,245,200);
     //pixelDensity(5);
 }

function draw() {
 background(100,245,150);
   

    //face
    noStroke();
    fill(255);
    ellipse(288,225,130,140);
   
    //hat
    strokeWeight(0);
    fill(0);
    rectMode(CENTER);
    rect(270,185,150,30,209,144,144,144);
    arc(290, 185, 100, 100,-PI, 0);

    // left eye
    strokeWeight(2);
    stroke(0);
    fill(255);
    ellipse(250, 235, 30, 40);
    
    noStroke();
    r = random(111, 218);
    g = random(72, 47);
    b = random(209, 67);
    fill(r, g, b);
    beginShape();
    vertex(235, 235);
    vertex(245, 229);
    vertex(250, 215);
    vertex(255, 229);
    vertex(265, 235);
    vertex(255, 242);
    vertex(250, 255);
    vertex(245, 242);


    endShape(CLOSE);   

    // right eye
    strokeWeight(2);
    stroke(0);
    fill(255);
    ellipse(300, 235, 30, 40);
    noStroke();
    r = random(111, 218);
    g = random(72, 47);
    b = random(209, 67);
    fill(r, g, b);
    
    beginShape();
    vertex(285, 235);
    vertex(295, 229);
    vertex(300, 215);
    vertex(305, 229);
    vertex(315, 235);
    vertex(305, 242);
    vertex(300, 255);
    vertex(295, 242);
    endShape(CLOSE);

  

    //left wing

    stroke(0);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(250, 290);
    curveVertex(250, 290);
    curveVertex(190,250);
    curveVertex(130,235);
    curveVertex(90, 255);
    curveVertex(80,290);
    curveVertex(120, 320);
    curveVertex(160, 340);
    curveVertex(120, 380);
    curveVertex(115, 455);
    curveVertex(195, 410);
    curveVertex(235, 370);
    endShape();

   //right wing

    stroke(2);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(355, 292);
    curveVertex(355,292);
    curveVertex(395,225);
    curveVertex(455,190);
    curveVertex(530,197);
    curveVertex(555,250);
    curveVertex(545,292);
    curveVertex(520,325);
    curveVertex(475,342);
    curveVertex(427,350);
    curveVertex(385,345);
    curveVertex(438,372);
    curveVertex(457,407);
    curveVertex(400,413);
    curveVertex(385,390);
    curveVertex(385,390);

    
    endShape();


    //mouth
    //ellipse(280,275,10,7);
    arc(280, 275, 10, 10, PI, 0);


    //body
    fill(255);
    noStroke();
    ellipse(300, 600, 100, 600);

    //tear
    fill(0,0,230);
    ellipse(310, 265, 8, 10);
    ellipse(315, 285, 11, 13);
    ellipse(247,260, 8,10);
    ellipse(245, 277, 11, 13);
  
//background
    fill(255);
 beginShape();
    vertex(85, 235);
    vertex(95, 229);
    vertex(100, 215);
    vertex(105, 229);
    vertex(115, 235);
    vertex(105, 242);
    vertex(100, 255);
    vertex(95, 242);
    endShape(CLOSE);

  
    

}

Project-01-Self Portrait

Self-Portrait Attempt!

project-01-portrait
function setup() {
    createCanvas(500, 700);
    background(225, 65, 86);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    stroke(0);
    strokeWeight(4);
    fill(255, 85, 171);
    ellipse(250, 350, 378, 554);
    strokeWeight(1);
    fill(255, 255, 51);
    square(100, 170, 100);
    strokeWeight(5);
    fill(10, 154, 250);
    circle(349, 304, 156);
    strokeWeight(2);
    fill(153, 255, 51);
    rect(274, 120, 56, 400);
    strokeWeight(6);
    fill(204, 255, 255);
    quad(130, 256, 318, 105, 250, 478, 109, 284);
    strokeWeight(3);
    fill(68, 253, 62);
    rect(150, 110, 132, 146);
    strokeWeight(3);
    fill(178, 255, 102);
    ellipse(250, 500, 300, 140);
    strokeWeight(1);
    fill(247, 255, 0);
    triangle(154, 428, 336, 350, 297, 543);
    strokeWeight(4);
    fill(54, 229, 255);
    circle(130, 380, 150);
    noFill();
    line(210, 627, 290, 627);
    line(101, 530, 210, 627);
    line(290, 627, 399, 530);
    line(70, 325, 101, 530);
    line(430, 325, 399, 530);
    line(76, 255, 70, 325);
    line(424, 255, 430, 325);
    arc(250, 400, 56, 10, 210, 0);
    fill(255);
    ellipse(150, 300, 79, 65);
    ellipse(350, 300, 79, 65);
    fill(0, 26, 154);
    circle(150, 300, 65);
    circle(350, 300, 65);
    fill(225, 65, 86);
    triangle(150, 73, 250, 73, 120, 255);
    triangle(350, 73, 250, 73, 400, 255);
    triangle(145, 90, 20, 325, 120, 255);
    triangle(355, 90, 480, 325, 380, 255);
    strokeWeight(7);
    noFill();
    arc(150, 245, 85, 15, 0, 160);
    arc(350, 255, 85, 25, 30, 0);
    strokeWeight(4);
    arc(250, 465, 110, 5, 0, 160);
}

Project 1: My Self Portrait

My eyes blink 😉

jasmin-portrait
//jasmink
//face portrait

function setup() {
    createCanvas(500, 450);
    background(202,179,231);
}

function draw() {
  //hair
    noStroke();
    fill(24,14,46);                     //top hair
    arc(250,240, 195, 217, PI, TWO_PI); //top hair
    fill(24,14,46);                     //back long hair
    ellipse(250, 286, 220, 310);
    ellipse(250, 315, 230, 310);


  //ear
    noStroke();
    fill(67,47,144);                  //Ear purple
    ellipse(168,250,17,50);           //Left ear
    ellipse(333,250,17,50);           //right ear
    fill(137,122,184);                //Earing purple
    ellipse(170,275,30,30);           //Left earing
    ellipse(330,275,30,30);           //right earing

  //neck
    fill(77,63,150);
    noStroke();
    quad(230,324,274,324,283,380,216,380);

  //face
    fill(77,63,150);                  //face purple
    noStroke();
    ellipse(250,260,155,180);         //face
    fill(77,63,150);                  //hair line.middle purple
    rect(250,145,3,25);               // hair line

  //left eyebrows
    strokeWeight(4);
    stroke(24,14,46);                 //dark purple
    line(238, 220,208 ,217);
    line(208,217, 196,221);

  //right eyebrows
    strokeWeight(4);
    line(268, 220,298 ,217);
    line(298,217,310,221);

  //nose
    strokeWeight(2);
    arc(252, 270, 15, 15, 0+(PI*0.2), (PI*0.8));
    noFill();

  //eyes
    strokeWeight(3);
    arc(220, 245, 35, 15, 0, PI);
    arc(285, 245, 35, 15, 0, PI);
    noFill();
    if(mouseY<245){
        arc(220, 245, 35, 15, 0, TWO_PI);
        arc(285, 245, 35, 15, 0, TWO_PI);
        fill(24,14,46);             //dark purple 
        ellipse(220,245,15,15);     //eyes opening
        ellipse(285,245,15,15);
        fill(137,122,184);          //light purple
        ellipse(223,243,8,8);       //eye small circle
        ellipse(287,243,8,8);
    }

  //mouth
    fill(24,14,46);                 //dark purple
    noStroke();
    rect(225, 310, 55, 3);

  //body
    fill(77,63,150);                //face purple
    noStroke();
    ellipse(250,560,250,400);       //body


}

Project 1 – Self Portrait

This is me. 100% real-to-life, unedited, me.

my-true-portrait
/* Lance Yarlott
   Section D */

function setup() {
    createCanvas(600, 600);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);

    licenseAgreement = false;
    lightsOn = false;
    eyeLocXL = (width / 2) - 90;
    eyeLocXR = (width / 2) + 90;
    eyeLocY = (height / 2) - 90;
}

// big sorry for magic numbers lol

function draw() {
    if (licenseAgreement === false) {
        background(0);
        textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Do you agree to the EULA? Press any key to continue.", 300, 300);
        if (keyIsPressed === true) licenseAgreement = true;
    } else {
        if (mouseIsPressed) {
            if (mouseButton === LEFT) lightsOn = true;
            if (mouseButton === CENTER) lightsOn = false;
        }

        /* I tried to bound mX and mY with the circumference of the eye and 
        failed miserably because p5 calculates the angles in a weird way? */ 
        
        mX = mouseX + 1 < 600 ? mouseX + 1 : 600;
        mY = mouseY + 1 < 600 ? mouseY + 1 : 600;
        
        mX = ((mX / 600) * 36) - 18;
        mY = ((mY / 600) * 36) - 18;

        if (lightsOn) {
            background(255, 244, 176); // light yellow

            strokeWeight(2);
            stroke(0);

            fill(0, 255, 0); // green
            triangle(width / 2, height / 3 + 140, 0, 600, 600, 600);
            fill(0);
            text("i am trgl", width / 2, 500);

            fill(245, 205, 149); // sort of a tan-ish color
            ellipse(width / 2, height / 3, 360, 360); // head shape

            fill(255); // eye whites
            arc(eyeLocXL, eyeLocY, 80, 80, 
                0, PI + QUARTER_PI, CHORD); // taken from p5 ref site
            arc(eyeLocXR, eyeLocY, 80, 80, 
                -QUARTER_PI, PI, CHORD);

            fill(77, 54, 21); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            fill(0); // pupils
            ellipse(eyeLocXL + mX, eyeLocY + mY, 20, 20);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 20, 20);

            strokeWeight(40);
            stroke(245, 205, 149);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);

            fill(245, 205, 149); // lids
            noStroke();
            arc(eyeLocXL, eyeLocY, 82, 82, 
                PI + QUARTER_PI, 0, CHORD);
            arc(eyeLocXR, eyeLocY, 82, 82, 
                PI, -QUARTER_PI, CHORD);

            fill(77, 54, 21);
            arc(width / 2, height / 3, 360, 360, -PI + QUARTER_PI, -QUARTER_PI);

            fill(0);
            triangle(width / 2, eyeLocY + 30, width / 2 - 25, eyeLocY + 80, 
                     width / 2 + 25, eyeLocY + 80);

            stroke(0);
            strokeWeight(10);
            line(eyeLocXL, height / 3 + 120, eyeLocXR, height / 3 + 120);
            strokeWeight(2);

        } else {
            background(0);
            textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Click, friend.", 300, 300);

            fill(255); // eye whites
            ellipse(eyeLocXL, eyeLocY, 80, 80); 
            ellipse(eyeLocXR, eyeLocY, 80, 80);

            fill(0); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            strokeWeight(40);
            stroke(0);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);
        }
    }
}

One difficulty was trying to get the eye tracking working. JS calculates angles in an odd way, so moving in a circular motion was mostly impossible to get right for the time being.