Project-02-Variable-Face – Page 6 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Katrina Hu – Project 02 – Variable Face

/*Katrina Hu
15104 C
kfh@andrew.cmu.edu
Project - 02 - Face*/


var eyeSize = 22;
var cheekWidth = 30;
var mouthWidth = 45;
var backgroundColor = 205
 
function setup() {
    createCanvas(640, 480);
    background(252, backgroundColor, 186);
    noStroke();
}
 
function draw() {
    background(252, backgroundColor, 186);
    //chopstick 1
    fill(158, 106, 68);
    rect(100, 270, 540, 7, 20, 0, 0, 20);
    triangle(640, 265, 100, 270, 640, 278);
    //bun shape
    fill(252, 232, 220);
    ellipse(220, 295, 200, 185);
    fill(255, 249, 242);
    ellipse(220, 275, 185, 165);
    triangle(222, 158, 134, 241, 305, 241);
    strokeWeight(2);
    line(250, 200, 250, 220);
    fill(252, 232, 220);
    ellipse(220, 195, 7, 20);
    ellipse(207, 190, 7, 20);
    ellipse(232, 190, 7, 20);
    //chopstick 2
    noStroke(0)
    fill(158, 106, 68);
    rect(100, 320, 540, 7, 20, 0, 0, 20);
    triangle(640, 315, 100, 320, 640, 328);
    //bun eyes
    fill(0, 0, 0)
    ellipse(180, 250, eyeSize);
    ellipse(270, 250, eyeSize);
    fill(255, 255, 255);
    ellipse(180, 245, eyeSize / 3);
    ellipse(270, 245, eyeSize / 3);
    //bun cheeks
    fill(255, 181, 176);
    ellipse(165, 275, cheekWidth, 10);
    ellipse(280, 275, cheekWidth, 10);
    //bun mouth
    fill(189, 100, 87);
    arc(220, 290, mouthWidth, 30, 0, PI, CHORD);
}
 
function mousePressed() {
    cheekWidth = random(25, 40);
    eyeSize = random(20, 30);
    mouthWidth = random(40, 55);
    backgroundColor = random(190, 210)
}

This was a very fun project to do, as I was able to play around with all the different variables and shapes.

Joanne Chui – Project 02 – Variable Face

variableface_jchui1

/*
Joanne Chui 
Section C
Project 2
*/
var chin = 2
var forehead = 2
var nose = 245
var nosetip = 250
var eyeWidth = 12
var eyeHeight = 2
var r = 10
var g = 10
var b = 10
var mood = 270
var glasses = 2

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

function draw(){
    background(213, 219, 227);
    var xpt3 = width / 2;
    var ypt3 = height / 2;
    var xpt2 = xpt3 - 60
    var xpt4 = xpt3 + 60

    //face
    noFill();
    strokeWeight(1);
    stroke(r, g, b);
    beginShape();
    curveVertex(xpt2 + forehead, 150); //pt1 
    curveVertex(xpt2, ypt3 + chin);//pt2
    curveVertex(xpt3, ypt3);//pt3
    curveVertex(xpt4, ypt3 + chin);//pt4
    curveVertex(xpt4 - forehead, 150);//pt5
    curveVertex(xpt2 + forehead, 150);//pt6
    curveVertex(xpt2, ypt3 + chin);//pt7
    curveVertex(xpt2, ypt3 + chin);//pt7
    endShape();

    //nose
    strokeWeight(2);
    beginShape();
    curveVertex(200,190);
    curveVertex(200,190);//1
    curveVertex(235, 200);//2
    curveVertex(245, nose);//3
    curveVertex(nosetip, nose + 10);//4
    curveVertex(245, nose + 20);//5
    curveVertex(245, nose + 20);
    endShape();

    //eyes
    strokeWeight(1.5);
    fill("white");
    arc(210, 220, eyeWidth, eyeHeight, PI, 0);//left
    arc(210, 220, eyeWidth, eyeHeight / 2, 0, PI);
    arc(270, 220, eyeWidth, eyeHeight, PI, 0);//right
    arc(270, 220, eyeWidth, eyeHeight / 2, 0, PI);

    //pupil
    fill(r, g, b);
    ellipse(210, 220, eyeHeight / 4, eyeHeight / 4);
    ellipse(270, 220, eyeHeight / 4, eyeHeight / 4);

    //mouth
    triangle(220, 275, 230, 285, 270, mood);
    //hair
    beginShape();
    curveVertex(xpt4 - forehead, 150);
    curveVertex(xpt2 + forehead, 150); 
    curveVertex(xpt2, ypt3 + chin);
    curveVertex(xpt2 - 10, ypt3 + chin + 10);
    curveVertex(xpt2 - 10, ypt3 + chin);
    curveVertex(xpt2 + forehead - 10, 130);
    curveVertex(xpt4 - forehead, 142);
    curveVertex(xpt4 - forehead, 150);
    endShape();

}


function mousePressed(){
    chin = random(-80, 0);
    forehead = random(-30, 30);
    nose = random(225, 240);
    nosetip = random(250, 260);
    eyeWidth = random(15, 25);
    eyeHeight = random(5, 25);
    r = random(0, 225);
    g = random(0, 225);
    b = random(0, 225);
    mood = random(260, 300);
   glasses = random(1, 3);

}

I was inspired to do more of an abstract face in order to generate more unique results, and wanted as many elements as possible to vary to create interesting combinations. I experimented with the head shape especially because I thought it would impact the way the face would appear the most.

Sammie Kim- Project – 02 – Variable Faces

sketch

// global variables
var faceWidth=225
var faceHeight=210
var earW=70
var earH=230
var innerW=30
var innerH=100
var eyeW=20
var eyeH=20
var mouthW=40
var mouthH=50

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

function draw() {
  background(253, 255, 172);
  //ear
  stroke(255);
  fill(254,170,221);
  ellipse(210,200,earW,earH);
  ellipse(285,200,earW,earH);
  fill(255);
  ellipse(210,200,innerW,innerH);
  ellipse(285,200,innerW,innerH);
  //face
  noStroke();
  fill(254,170,221);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  //eyebrow
  fill(0);
  triangle(190,270,180,280,230,300);
  rect(260,290,25,10);
  //nose
  fill(0);
  ellipse(245,355,25,20);
  //eyes
  stroke(0);
  strokeWeight(4);
  fill("black");
  ellipse(210,320,eyeW,eyeH);
  ellipse(270,320,eyeW,eyeH);
  //mouth
  fill(0);
  arc(245,385,mouthW,mouthH,0,PI,CHORD);
 }

function mousePressed() {
    faceWidth=random(225,290);
    faceHeight=random(210,280);
    eyeW=random(20,40);
    eyeH=random(20,40);
    mouthW=random(40,70);
    mouthH=random(30,50);
}

I struggled initially figuring out how to correctly utilize the variables in order to differ the facial expressions. Still, this assignment was helpful for understanding the mousePressed and random function.

Claire Lee – Project – 02 – Variable Faces

variable_faces

/*Claire Lee
  15-104 Section B
  seoyounl@andrew.cmu.edu
  Project - 02 */

var backgroundRed = 195;
var backgroundGreen = 227;
var backgroundBlue = 255;
//background color variables

var drinkColorRed = 215;
var drinkColorGreen = 159;
var drinkColorBlue = 117;
var drinkColorInt = 0;
//drink color variables

var strawColorRed = 255;
var strawColorGreen = 166;
var strawColorBlue = 255;
//straw color variables

var bubbleRadius = 25;
//bubble size

var expressionControl = 400;
//mouth

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(backgroundRed, backgroundGreen, backgroundBlue);

    noStroke();
    fill(backgroundRed - 30, backgroundGreen - 30, backgroundBlue - 30);
    rect(0, 460, 600, 140);
    //surface

    noStroke();
    fill(backgroundRed - 75, backgroundGreen - 75, backgroundBlue - 75);
    quad(200, 500, 400, 500, 425, 600, 175, 600);
    //shadow

    stroke(255);
    strokeWeight(4); 
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt); 
    arc(300, 500, 200, 50, 0, PI, OPEN);
    //cup base

    noStroke();
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt);
    quad(200, 500, 185, 320, 415, 320, 400, 500); 
    //drink "body"

    noStroke();
    fill(drinkColorRed - drinkColorInt - 30, drinkColorGreen - drinkColorInt - 30, drinkColorBlue - drinkColorInt - 30);
    ellipse(300, 320, 230, 50);
    //drink "top"

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, PI, 0, OPEN);
    //top border of cup rim

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    rect(285, 150, 30, 170); 
    //straw

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    arc(300, 320, 30, 10, 0, PI, OPEN);
    //straw base 

    noStroke();
    fill(strawColorRed - 30, strawColorGreen - 30, strawColorBlue - 30);
    ellipse(300, 150, 30, 10);
    //straw hole 

    stroke(255);
    strokeWeight(4);
    line(200, 500, 175, 200); 
    //left border of cup

    stroke(255);
    strokeWeight(4);
    line(400, 500, 425, 200);
    //right border of cup

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, 0, PI, OPEN);
    //bottom border of cup rim

    noStroke();
    fill(0);
    ellipse(250, 380, 15);
    //left eye

    noStroke();
    fill(0);
    ellipse(350, 380, 15);
    //right eye

    stroke(0);
    strokeWeight(2);
    point(285, 390);
    point(300, expressionControl); 
    point(315, 390);
    strokeWeight(2);

    noFill();
    beginShape();
    curveVertex(285, 390);
    curveVertex(285, 390);
    curveVertex(300, expressionControl);
    curveVertex(315, 390);
    curveVertex(315, 390);
    endShape();
    //mouth

    noStroke();
    fill(0);
    ellipse(225, 493, bubbleRadius);
    ellipse(255, 501, bubbleRadius);
    ellipse(285, 505, bubbleRadius);
    ellipse(315, 505, bubbleRadius);
    ellipse(345, 501, bubbleRadius);
    ellipse(375, 493, bubbleRadius);
    ellipse(218, 465, bubbleRadius);
    ellipse(250, 473, bubbleRadius);
    ellipse(283, 477, bubbleRadius);
    ellipse(317, 477, bubbleRadius);
    ellipse(350, 473, bubbleRadius);
    ellipse(380, 465, bubbleRadius);
    //bubbles

}


function mousePressed() {
    backgroundRed = random(150, 255);
    backgroundGreen = random(150, 255);
    backgroundBlue = random(150, 255);
    //background color variations

    drinkColorInt = random(0,100);
    //drink color intensity

    strawColorBlue = random(0,255);
    //straw color variations

    bubbleRadius = random(17,27);
    //bubble size variations

    expressionControl = random(380,400);
    //mouth variations

}

This project was a really fun way to experiment with changing shapes. I enjoyed testing some new functions as well. I struggled a bit with not compromising the aesthetic integrity of the piece while still allowing there to be perceptible variations in color and size, but I’m happy with how it turned out.

Sean Meng – Project 02 – Variable face

hmeng-project 2

//Sean(Han) Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-02-Variables-Face

var hairColor = 20;
var hairShape = 10;
var glassThickness = 3; 
var mouthSize = 2

function setup() {
    createCanvas(480, 480);
    background(240);
 
}

function draw() {   
    background(240);

 //Left Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(180, 240);
    vertex(167, 240);
    vertex(160, 260);
    vertex(180, 290);
    vertex(195, 300);
    vertex(195, 260);
    endShape();

//Right Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(340, 240);
    vertex(344, 240);
    vertex(350, 260);
    vertex(330, 290);
    vertex(325, 300);
    vertex(195, 260);
    endShape();

 //Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(195, 270); 
    vertex(195, 310);  
    vertex(230, 335);  
    vertex(247, 342); 
    vertex(270, 345);
    vertex(317, 298); 
    vertex(317, 225);   
    vertex(195, 225); 
    endShape();

 //The color of hair changes in different shades of blue randomly everytime mouse clicks
    stroke(hairColor, hairColor * 2, hairColor * 3);
    fill(hairColor, hairColor * 2, hairColor * 3);
    strokeWeight(4);
    strokeJoin(ROUND);
    beginShape();
    vertex(182.5, 262.5);
    vertex(167.5, 220);

//The silhouette of hair expands randomly everytime mouse clicks
    vertex(180 - hairShape * 2, 150 + hairShape);
    vertex(250, 127.5 - hairShape * 2);
    vertex(317.5 + hairShape / 2, 150 - hairShape / 2);
    vertex(340 + hairShape * 2, 202.5 - hairShape * 2);
    vertex(328, 263.25);
    vertex(322, 265.25);
    vertex(317.5, 225);
    vertex(198, 231);
    vertex(280, 225);
    vertex(255, 235);
    vertex(240, 230);
    vertex(230, 235);
    vertex(197, 230);
    vertex(195, 270);
    vertex(182.5, 262.5);
    endShape();

//The thickness of the glasses frame varies everytime mouse clicks
    stroke(0);
    strokeWeight(3);
    fill(255);
    strokeWeight(glassThickness);
    arc(225, 265, 42, 37, 0, PI + PI);
    fill(255);
    arc(285, 265, 42, 37, 0, PI + PI);
    stroke(150);
    strokeWeight(3);
    curve(246, 263, 246, 260, 260, 260, 282, 263);
    stroke(0);
    strokeWeight(3);
    line(195, 260, 205, 260);
    line(305, 260, 319, 260);

//Nose
    strokeWeight(2);
    line(255, 270, 250, 300);
    line(250, 300, 255, 300);

//The size of the mouth increases when mouse clicks
    noStroke();
    fill(240,214,159);
    triangle(240 - mouthSize, 325, 273 + mouthSize, 325, 250, 320 - mouthSize);
}


function mousePressed(){
    hairColor = random(0, 80);
    hairShape = random(5, 30);
    glassThickness = random(3, 7);
    mouthSize = random(2, 10);
}

In this project, I explored with interactive component “mousePressed” to assign random variables such as color or shape to my drawings. In this drawing, I was inspired by the character in Rick and Morty, so the hair varies in shades of blue and expand outwards.

Siwei Xie-Project-02-Variable Face

variable face

//Siwei Xie
//Section 1-B
//sxie1@andrew.cmu.edu
//Project-02-variable face

var mouthHeight = 60;
var eyeHeight = 40;
var hatAdjustor = 2.5;
var hatColor = (0,0,196);
var eyebrowHeight = 200;
var pupilSize = 16;


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

function draw() {

    //re-draw background to avoid "previous hats" when hat moves
    background(220);

    //hair
    fill(0);
    rect(115,120,270,300);

    //clothes
    fill(122,35,76);
    noStroke();
    quad(150, 391, 345, 390, 450, 640,100, 640);

    //face
    fill(232,196,131);
    noStroke();
    ellipse(250,250,250,300);

    //left eye
    fill(3,3,3);
    ellipse(200,250,40,eyeHeight);

    //right eye
    fill(3,3,3);
    ellipse(300,250,40,eyeHeight);

    //nose
    fill(179,149,85);
    triangle(250,260,240,300,260,300);

    //mouth
    fill(208,68,61);
    ellipse(250,345,35,mouthHeight);

    // left pupil
    fill(255)
    noStroke();
    square(195, 245, pupilSize);

    // right pupil
    fill(255)
    noStroke();
    square(295, 245, pupilSize);

    // right earring
    fill(128,194,233);
    arc(370, 300, 60, 60, 15, HALF_PI);

    // left earring
    fill(128,194,233);
    arc(120, 300, 60, 60, 15, HALF_PI);

    //hat
    var hatPosition = width / 2 + hatAdjustor;
    fill(hatColor,0,196);
    ellipse(hatPosition,130,290,125);

    // left eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(5);
    point(215, 220);
    point(195, eyebrowHeight);
    point(170, 210);
    point(160, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(215, 220);
    curveVertex(215, 220);
    curveVertex(195, eyebrowHeight);
    curveVertex(170, 210);
    curveVertex(160, 220);
    curveVertex(160, 220);
    endShape();

    //right eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(0);
    point(350, 220);
    point(340, 210);
    point(310, eyebrowHeight);
    point(290, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(350, 220);
    curveVertex(350, 220);
    curveVertex(340, 210);
    curveVertex(310, eyebrowHeight);
    curveVertex(290, 220);
    curveVertex(290, 220);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'mouthHeight' gets a random value between 15 and 55.
    mouthHeight = random(15, 60);
    eyeHeight = random(20, 50);
    hatAdjustor = random(-30,30);
    hatColor = random (0,196);
    eyebrowHeight = random (200,220);
    pupilSize = random (8,16);

}

I had fun creating a face which includes emotions such as “surprised”, “angry” and “calm.” The story is that the hat accidentally moves and changes color, which surprises the girl. She then becomes angry, since the hat is very out of place.

Ankitha Vasudev – Project 02 – Variable Face

sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-02-Variable Face

//global variables
var faceWidth = 200; 
var faceHeight = 150;
var earH = 50;
var earW = 40;
var eyeW = 20;
var eyeH = 30;
var eyeColor = 0;
var r = 255;
var g = 217;
var b = 255;
var cheekw = 20;
var cheekh = 20;


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

function draw() {

    //background
    noStroke();
    fill(r, g, b);
    rect(0, 0, 640, 480);
    fill(167, 220, 200);
    rect(20, 20, 600, 440);

    //ears
    noStroke();
    fill(110, 59, 0);
    ellipse(237, 240, earW, earH);
    ellipse(402, 240, earW, earH);

    //face
    fill(110, 59, 0);
    ellipse(width / 2, 220, faceWidth - 50, faceHeight);
    ellipse(width / 2, 300, faceWidth, faceHeight);
    fill(229, 222, 180);
    ellipse(width / 2, 220, faceWidth - 80, faceHeight - 30);
    ellipse(width / 2, 300, faceWidth - 30, faceHeight - 30);

    //eyes
    stroke(255);
    strokeWeight(12);
    fill(eyeColor);
    ellipse(295, 240, eyeW, eyeH);
    ellipse(345, 240, eyeW, eyeH);

    //mouth
    noFill();
    stroke(255, 160, 255);
    strokeWeight(4);
    beginShape();
    curveVertex(280, 300);
    curveVertex(300, 320);
    curveVertex(340, 320);
    curveVertex(360, 300);
    endShape();

    //cheeks
    noStroke();
    fill(255, 180, 255);
    ellipse(265, 300, cheekw, cheekh);
    ellipse(375, 300, cheekw, cheekh);
}

function mousePressed(){
    faceWidth = random(200, 230); 
    faceHeight = random(150, 180);
    earH = random(30, 100);
    eyeW = random(20, 40);
    eyeH = random(35, 60);
    eyeColor = random(0, 200);
    r = random(190, 250);
    g = random(190, 250);
    b = random(230, 255);
    cheekw = random(20, 40);
    cheekh = random(20, 40);
}

I wanted to make something that was fun and creative. I used the face shape and features of a monkey for this project. It was interesting to play around with different variables that allowed me to change the colors and shapes in the program.

Ian Kaneko-Project 02-Variable Face

For this project I did a simple cartoon face that I could exaggerate features on. I experimented a bit with curveVertex’s for the mouth and I think it turned out pretty good. The hardest part about this was deciding what needed to randomized and what I could lock in place.

ikaneko Variable Faces

// Ian Kaneko
// Section D
// ikaneko@andrew.cmu.edu
// Project-02 Variable Face


var headWidth = 250;
var headHeight = 250;
var noseWidth = 80;
var noseHeight = 80;
var noseY = 160 + noseHeight / 2;
var mouthTopLeftX = 175;
var mouthTopLeftY = 260;
var mouthTopRightX = 225;
var mouthTopRightY = 260;
var mouthBottomLeftX = 160;
var mouthBottomLeftY = 300;
var mouthBottomRightX = 240;
var mouthBottomRightY = 300;
var outsideBrowY = 120;
var insideBrowY = 120;


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(140, 100, 80);
  noStroke();
  
  // Head
  
  fill(200, 230, 250);
  ellipse(200, 200, headWidth, headHeight);
  
  // Mouth
  fill(230, 200, 230);
    
    point(mouthTopLeftX, mouthTopLeftY);
    point(mouthBottomLeftX, mouthBottomLeftY);
    point(mouthTopRightX, mouthTopRightY);
    point(mouthBottomRightX, mouthBottomRightY);
  
  beginShape();
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthTopLeftX, mouthTopLeftY);
    curveVertex(mouthTopRightX, mouthTopRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
  endShape();
  
  // Nose
  
  fill(150, 200, 230);
  ellipse(200, 160 + noseHeight / 2, noseWidth, noseHeight);
  
  // Eyes
  
  fill(130, 100, 150);
  circle(150, 150, 30);
  circle(250, 150, 30);
  
  strokeWeight(7);
  stroke(150, 200, 230);
  line(120, outsideBrowY, 175, insideBrowY);
  line(280, outsideBrowY, 225, insideBrowY);
  
  // Randomize
  
}
function mousePressed() {
  headWidth = random(245, 290);
  headHeight = random(245, 290);
  mouthBottomLeftX = random(150, 180);
  mouthBottomLeftY = random(290, 310);
  mouthBottomRightX = random(230, 250);
  mouthBottomRightY = random(290, 310);
  noseWidth = random(30, 70);
  noseHeight = random(70, 180);
  outsideBrowY = random(100, 140);
  insideBrowY = random(100, 140);
}

Jai Sawkar – Project 02 – Variable Face

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-02: Variable Face 

var milkBody = '#99dfff';
var milkDark = '#008bcc';
var milkDark1 = '#80d7ff';
var mouth1 = 44;
var mouth2 = 131;
var mouth3 = 171;
var compli1 = 179;
var compli2 = 231;
var compli3 = 255;
var pupil = 9.5;
var pupilLeft2 = 274;
var pupilRight = 321;
var eyeLeft = 0;
var eyeRight = 0;
var bg1 = 230;
var bg2 = 247;
var bg3 = 255;
var m1 = 299;
var m2 = 239;
var m3 = 42;
var m4 = 17;

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

function draw() {
    background(bg1, bg2, bg3);

    stroke(1)

    //milkcarton
    fill(milkBody);
    quad(217.4, 132.1, 301.1, 127.4, 307.8, 142.3, 225.4, 147.7);
    quad(225.4, 147.7, 257.9, 190.7, 339.4, 179.6, 307.8, 142.3);
    quad(257.9, 190.7, 339.4, 179.6, 339.3, 283.5, 261, 298);

    //shadow1
    fill(milkDark1);
    quad(183.5, 178.6, 185.4, 280.4, 261.1, 298.1, 257.9, 190.7);
    triangle(257.9, 190.7, 183.5, 178.6, 225.4, 147.6);

    //shadow2
    fill(0, 139, 204, 80);
    noStroke()
    triangle(183.5, 178.7, 231.1, 154.9, 225.4, 147.7);

    //shadow3
    fill(0, 139, 204, 80);
    triangle(183.5, 178.7, 242.7, 171.9, 231, 154.8)
    stroke(1)
    line(183.5, 178.7, 242.7, 171.9)

    //faces

    noStroke()
    //face1
    fill(milkDark)
    //left and right eye
    ellipse(278, 215, eyeLeft)
    ellipse(323, 210, eyeRight)


    //pupil1
    noStroke()
    fill(compli1, compli2, compli3)
    ellipse(pupilLeft2, 213, pupil)
    ellipse(pupilRight, 208, pupil)

    //mouth1
    fill(milkDark)
    ellipse(m1, m2, m3, m4)
}

function mousePressed() {
    pupil = random(9.5, 14)
    pupilLeft2 = random(274, 280)
    pupilRight = random(321, 328)
    eyeLeft = random(25, 30)
    eyeRight = random(25, 30)
    bg1 = random(102, 240)
    bg2 = random(0, 204)
    bg3 = random(204, 255)
    m1 = random(290, 310)
    m2 = random(239, 250)
    m3 = random(30, 50)
    m4 = random(10, 24)

}

When beginning the project, I wanted to start with something normal and bland, but once clicked, it would turn into an unexpected reaction. It is for this reason I chose a milk carton and made the initial face quite neutral; once activated, a sense of euphoria fills the little carton, changing his expression & the background with every click.

Raymond Pai-Project-02-Variable-Face

sketch

var r = (200);
var g = (120);
var b = (120);
var mouthx = 50
var mouthy = 20
var eyew = 40
var eyeh = 40
var brow1y1 = 100
var brow1y2 = 100
var brow2y1 = 100
var brow2y2 = 100

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

function draw() {
    background(240);
    // Draw head
    strokeWeight(5);
    fill(r, g, b, 127);
    ellipse(320, 240, 400, 400);
    //Draw mouth
    fill(0);
    stroke(255, 200, 200);
    rect(320, 300, mouthx, mouthy)
    //Draw eye1
    strokeWeight(20);
    stroke(255);
    fill(0);
    ellipse(420, 200, eyew, eyeh);
    //Draw eye2
    strokeWeight(20);
    stroke(255);
    fill(0);
    ellipse(330, 200, eyew, eyeh);
    //Draw brow1
    strokeWeight(18);
    stroke(0);
    line(270, brow1y1, 350, brow1y2)
    //Draw brow2
    strokeWeight(18);
    stroke(0);
    line(380, brow2y1, 430, brow2y2)
    //ear
    strokeWeight(5);
    fill(r, g, b, 127)

    arc(220, 250, 80, 80, 0, 5 + QUARTER_PI, OPEN);
}
function mousePressed() {
  // Check if mouse is inside the circle
  let d = dist(mouseX, mouseY, 360, 200);
  if (d < 700) {
  //randomize
    r = random(120, 200);
    g = random(100, 120);
    b = random(100, 120);
    mouthx = random(50, 95);
    mouthy = random(30, 105);
    eyew = random (20, 90);
    eyeh = random (20, 145);
    brow1y1 = random (60, 100);
    brow1y2 = random (60, 100);
    brow2y1 = random (60, 100);
    brow2y2 = random (60, 100);
  }
}

Changes in color, mouth, eyes, and eyebrows. It is an expressive fish.