Month: August 2019

Kristine Kim- Project 01

sketch

/*Kristine Kim
15104-section D
younsook@andrew.cmu.edu
Project-01*/

function setup() {
    createCanvas(600, 600);
    background('#fae');
    
    //seaweed
    //noStroke();
    fill('green');    
    strokeWeight(5.0);   
    ellipse(100,40,81,81);
    ellipse(100,100,81,81);
    ellipse(100,160,81,81);
    ellipse(100,220,81,81);
    ellipse(100,280,81,81);
    ellipse(100,340,81,81);
    ellipse(100,400,81,81);
    ellipse(100,460,81,81);
    ellipse(100,520,81,81);
    ellipse(100,580,81,81);
    ellipse(300,400,81,81);
    ellipse(300,460,81,81);
    ellipse(300,520,81,81);
    ellipse(300,580,81,81);
    ellipse(525,220,81,81);
    ellipse(525,280,81,81);
    ellipse(525,340,81,81);
    ellipse(525,400,81,81);
    ellipse(525,460,81,81);
    ellipse(525,520,81,81);
    ellipse(525,580,81,81);

    //fins
    noStroke();
    strokeCap(ROUND);
    colorMode(HSB);
    strokeWeight(4);
    fill('yellow');
    triangle(504,306,476,376,591,469);
    

    //body
    noStroke();
    strokeCap(ROUND);
    fill('blue');
    ellipse(434,287,221,448);
    ellipse(458,149,162,155);
    triangle(344,21,313,80,463,80);
    triangle(344,21,380,300,463,80);
    quad(344,21,187,287,197,370,430,511);

    //freckles
    fill('navy');
    ellipse(480,251,8,8);
    //ellipse(500,290,8,8);

    ellipse(480,220,8,8);
    ellipse(480,250,8,8);


    ellipse(460,251,8,8);
    ellipse(460,290,8,8);

    ellipse(470,226,8,8);
    ellipse(470,260,9,9);
    ellipse(450,270,8,8);
    ellipse(480,290,8,8);
    ellipse(490,275,8,8);

    ellipse(440,230,6,6);
    ellipse(440,245,9,9);
    ellipse(440,230,9,9);


    ellipse(440,280,8,8);
    ellipse(420,258,9,9);


    //circle
    fill('yellow');
    ellipse(292,284,43,111);
    stroke(126);

    //necklace
    line(239,325,461,421);
    line(461,421,535,370);
    line(461,421,461,465);
    line(446,440,476,440);

    //lips
    noStroke();
    fill('black');
    quad(548,309,477,319,548,323,573,313);   
    fill('red');
    triangle(544,284,463,327,548,309);
    quad(548,323,544,344,463,327,477,319);
    triangle(548,323,544,344,573,313);
    triangle(544,284,548,309,573,313);

   
    //eyes
    fill('white');
    ellipse(503,168,69,89); 
    ellipse(383,187,86,97);  
    fill('brown');
    ellipse(497,168,57,57);
    ellipse(396,190,61,61);
    fill('black');
    ellipse(488,173,36,36);
    ellipse(405,190,38,38);
    fill('white');
    ellipse(501,149,14,14);
    ellipse(396,168,14,13);
   
    //tail/fin
    fill('yellow');   
    quad(39,209,102,478,197,370,187,287);
    quad(197,370,187,287,244,303,251,344);
    triangle(412,360,332,396,356,556);
  }

My mom often told me that I look like a fish so for my project, I decided to do Dori from Finding Nemo as my self portrait. This assignment was a little bit challenging for me because I had to simplify inorganic shapes into geometric shapes but I used ellipse, triangles, and polygons to purse it. To make my design more interesting, I added more details such as, my daily cross necklace, freckles, seaweed, pupil, etc.

Alec Albright – Project 01

sketch

// ALec Albright
// Section A
// Project 01


function setup(){
    height = 600
    width = 600
    createCanvas(width, height);
    angleMode(DEGREES);
}

function draw(){
    // background color change
    if(mouseIsPressed) {
        background("black");
    } else {
        background("blue");
    }

    // forehead
    fill(0, 255, 255);
    noStroke();
    rect(140, 160, 320, 160);

    // lower half of face
    noStroke();
    fill("magenta");
    quad(125, 310, 475, 310, 370, 510, 250, 510);

    // mouth
    fill("black");
    arc(300, 400, 100, 40, -10, 170, PIE);

    // nose
    fill(153, 51, 255);
    triangle(300, 270, 325, 360, 300, 370);

    // eyes
    fill("white");
    ellipse(240, 215, 45, 80);
    ellipse(350, 240, 60, 95);
    if (mouseX < width/2) {
        fill('black');
        ellipse(230, 230, 15, 30);
        ellipse(340, 261, 23, 40);
    } else {
        fill('black');
        ellipse(250, 230, 15, 30);
        ellipse(360, 261, 23, 40);
    }

    // hair
    fill("orange");
    rect(120, 40, 365, 130, 200, 40, 60, 0);

    // jaw
    stroke('yellow');
    strokeWeight(30);
    line(150, 360, 250, 510);
    stroke("red");
    line(200, 485, 435, 485);
    stroke('limegreen');
    line(450, 335, 350, 545);
}

In creating this project, I wanted to experiment with both understanding the coordinate system and using imperfection and variety in shapes and color to provide character in the work. I certainly encountered some struggles in accurately placing objects initially, but I got better at it as I progressed through the assignment.

Looking Outwards 01

One piece of interactive computational art I interacted with that helped shape my interest in design more than anything else is the browser game by developer Orteil called Nested. When loaded, the program generates a universe via the creation of hundreds of folders titled “galaxy”. Clicking into one of these folders reveals more folders containing descriptions of solar systems, planets, and going further shows the life and geological forms on each one. When I was twelve, I spent recesses with some of my friends looking into the procedurally generated descriptions and translating them onto paper, drawing detailed creatures from just knowing their individual body parts. This type of computer generated art, with the extra steps of our own transitions of text to images. When I read about this class, I was reminded of Nested, and how it inspired me to create art with nothing more than randomly generated text. With the knowledge from this class, I want to take that idea further and learn to wed coding and art.

Deklin Versace – Project 01 – Self Portrait

sketch

// Deklin Versace Section E

function setup() {
    createCanvas(600,600);
    background(38,48,60);
    fill(255,233,52);
    stroke(255,233,52);
    quad(125,425,125,600,475,600,475,425);
    fill(214,214,214);
    stroke(214,214,214);
    quad(85,415,145,415,145,600,85,600);
    quad(515,415,455,415,455,600,515,600);
    bezier(85,415,45,425,44,600,85,800);
    bezier(515,415,555,425,556,600,515,800);

    fill(255,210,200);
    stroke(255,210,200);
    strokeWeight(1);
    quad(190,390,410,390,410,450,190,450);
    bezier(190,450,275,470,325,470,410,450);
    fill(255,218,200);
    stroke(255,218,200);
    quad(150, 100, 450, 100, 445, 390, 155, 390);
    triangle(155,390,300,470,445,390);

    fill(250);
    stroke(250);
    ellipse(220,220,70,60);
    ellipse(380,220,70,60);

    fill(255,191,160);
    stroke(255,191,160);
    triangle(300,200,259,320,341,320);
    quad(270,310,295,175,305,175,330,310);


    fill(53,7,7);
    strokeWeight(4);
    stroke(255,191,160);
    bezier(220,370,225,415,375,415,380,370);
    fill(255,191,160);
    bezier(220,370,290,360,310,360,380,370);

    fill(0);
    stroke(54,110,178);
    ellipse(222,225,35,35);
    ellipse(378,225,35,35);

    noFill();
    strokeWeight(15);
    stroke(33,28,24);
    bezier(170,190,210,180,260,160,275,195);
    bezier(325,195,340,160,390,180,430,190);
    noStroke();
    fill(33,28,24);
    quad(150,125,450,125,440,90,160,90);
    bezier(160,90,190,50,220,60,310,90);
    bezier(440,90,410,70,350,50,300,90);
    bezier(160,90,140,100,150,120,150,130);
    bezier(440,90,460,100,450,120,450,130);


}

While working on this, I challenged myself to learn how to use the bezier tool. While most of the shapes are straight-forward and easy to create with the co-ordinate system, the bezier tool’s unique points that pull the line towards them were very difficult to work with initially.

Cathy Dong – Looking Outwards 01

This project is named “Breath of Light,” designed by Preciosa Group. The particular piece was displayed in Milan Design Week.

This project is named “Breath of Light,” designed by Czech lighting specialist, Preciosa Group. The particular piece was displayed in Milan Design Week 2018.

“Breath of Light” injects life into the traditional concept of a chandelier. The visitors interact with the art piece and become part of the display. Simply sharing a breath, they create a lighting and music effect. Therefore, it becomes something more than just a beautiful lighting device, but a social tool. When interacting with the design piece, they also work together to explore the different lighting possibilities.

Technically, the design has over 1000 individual opal crystal bubbles. Special sensors are installed in different corners of the project. The idea is developed based on the company’s generations of designers’ creativity since 1548. The number of designers and workers behind this art piece is unknown, but we know that the creative director is Michael Vasku. They are inspired by historical chandeliers and contemporary pendants. I am inspired to create more interactive lighting devices, furniture, and building parts in the future.

source:

https://www.preciosalighting.com/news-detail/discover-the-breath-of-light

CJ Walsh – Looking Outwards 01

The project I chose to focus on is the ICD/ITKE Research Pavilion from 2015-16. The pavilion is part of a series meant to show the potential of computational design and different practices of fabrication within the world of architecture. The use of computational models to create a space is what initially drew to me to this project, as a designer studying environments the creation of spaces excites me. Another very significant factor that I love about this project is that the structure is based on research into biological structures in sea urchins and sand dollars.

The team consisted of researchers, students, biologists, architects and engineers. They were inspired by previous research on the structure of sea urchins and other creatures that identified key structures and patterns that allowed for light-weight forms. Using photos and microscopic imagery, the team was able to translate these structure into large scale pieces that could be assembled into a larger structure.

An interesting factor in the project was the use of robotic sewing to assemble the pieces. It is the first project of its kind to use sewing techniques on wooden fabrications at a large architectural scale. Custom software was created so that the robots could efficiently complete the task of sewing and securing all 151 segments together in the arrangement designer by the researchers.

I think that one of the really inspiring parts of this project is that it is part of a series that seeks to promote the use of computational models and practices into the design of physical spaces. It enables the researchers to think outside of the box into what could be a potential form and inspires other creators to begin experimenting with these media to create new and exciting projects that combine computational programming and architecture/environments design.

Source: Institute for Computational Design + University of Stuttgart

ICD/ITKE Research Pavilion 2015-16

Cathy Dong-Project-01-Face

sketch

function setup() {
    createCanvas(600,600);
    background(255,217,239);
}

function draw() {
    //background extra
    noStroke();
    fill("white");
    triangle(0,600,300,0,600,600);


    //neck
    noStroke();
    fill(249,215,196);
    rect(257,528,86,72);


    //neck outline
    stroke(130,65,57);
    strokeWeight(3);
    line(257,528,257,600);
    line(343,528,343,600);


    //Shirt
    noStroke();
    fill(176,209,255);
    rect(130,557,335,43,100,100,0,0);
    noStroke();
    fill(249,215,196);
    triangle(257, 557, 300, 600, 343, 557);



    //Face Basics
    noStroke();
    fill(249,215,196);
    beginShape();
    //Face
    curveVertex(385,145);
    curveVertex(430,190);
    curveVertex(450,288);
    curveVertex(450,400);
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    endShape(CLOSE);
    //face outline
    stroke(130,65,57);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    endShape();


    // Right hair basics
    noStroke();
    fill(52,35,25);
    beginShape();
    //Left hair
    curveVertex(373,68);
    curveVertex(354,57);
    curveVertex(336,48);
    curveVertex(300,43);
    curveVertex(212,64);
    curveVertex(135,133);
    curveVertex(84,230);
    curveVertex(64,302);
    curveVertex(51,402);
    curveVertex(48,510);
    curveVertex(74,574);
    curveVertex(193,600);
    curveVertex(217,579);
    curveVertex(231,506);
    //left hair shaping face
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    //left hair
    curveVertex(388,120);
    curveVertex(385,100);
    curveVertex(373,67);
    endShape(CLOSE);


    // Right hair basics
    noStroke();
    fill(63,47,37);
    beginShape();
    //Right Hair
    curveVertex(388,120);
    curveVertex(385,110);
    curveVertex(373,67);
    curveVertex(408,76);
    curveVertex(453,106);
    curveVertex(500,182);
    curveVertex(530,300);
    curveVertex(538,430);
    curveVertex(515,543);
    curveVertex(404,590);
    //Right Hair shaping face
    curveVertex(370,514);
    curveVertex(435,440);
    curveVertex(450,400);
    curveVertex(450,288);
    curveVertex(420,190);
    curveVertex(385,145);
    endShape(CLOSE);

   
    //Eye
    fill("white");
    stroke("black");
    strokeWeight(1);
    beginShape();
    //Left
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);//turning point
    curveVertex(263,325);
    curveVertex(245,335);
    curveVertex(224,337);
    curveVertex(202,331);
    curveVertex(183,318);
    endShape(CLOSE); 
    //Right
    beginShape();
    curveVertex(413,318);
    curveVertex(413,318);
    curveVertex(394,331);
    curveVertex(372,337);
    curveVertex(353,335);
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    endShape(CLOSE);

    //Eye Line
    noFill();
    stroke("black");
    strokeWeight(3);
    //Left
    beginShape();
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);
    curveVertex(263,325);
    endShape();
    //Right
    beginShape();
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    curveVertex(413,318);
    endShape();


    //Eyeball
    //Left
    fill(82,63,51);
    strokeWeight(1);
    ellipse(227,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(227,318,20);
    fill("white");
    noStroke();
    ellipse(235,312,8);
    //Right
    fill(82,63,51);
    strokeWeight(1);
    ellipse(370,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(370,318,20);
    fill("white");
    noStroke();
    ellipse(378,312,8);


    //nose 1
    stroke(130,65,57);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(272,384);
    curveVertex(271,384);
    curveVertex(266,395);
    curveVertex(274,401);
    curveVertex(280,397);
    curveVertex(290,405);
    curveVertex(300,412);
    curveVertex(310,405);
    curveVertex(320,397);
    curveVertex(326,401);
    curveVertex(334,395);
    curveVertex(329,384);
    curveVertex(328,384);
    endShape();
    //nose 2
    stroke(130,65,57);
    strokeWeight(1);
    noFill();
    line(315,310,318,370);


    //lip
    //color
    fill(217,92,48);
    noStroke();
    beginShape();
    curveVertex(300,440);
    curveVertex(288,435);
    curveVertex(262,440);
    curveVertex(239,446);
    curveVertex(262,465);
    curveVertex(300,477); //midpoint
    curveVertex(338,465);
    curveVertex(361,446);
    curveVertex(338,440);
    curveVertex(312,435);
    curveVertex(300,440);
    endShape(CLOSE);
    //line
    noFill();
    stroke(130,65,57);
    strokeWeight(2);
    curve(232,380,232,445,368,445,368,380);
    //point
    fill(130,65,57);
    noStroke();
    ellipse(232,445,5);
    ellipse(368,445,5);


    //glass
    noFill();
    stroke("black");
    strokeWeight(3);
    ellipse(227,325,120,110);
    ellipse(370,325,120,110);
    stroke("black");
    strokeWeight(5);
    line(286,312,310,312);
    stroke(255,204,29);
    strokeWeight(3);
    line(286,310,310,310);

}

The very first thing is to draw a rough sketch of myself. I snap pixels with the “guide line” tool in Photoshop. The process is entertaining, even though it was a bit struggle to find the exact point that creates a smooth shape.

Hyejo Seo – Project 01


hyejos-portrait

For my self-portrait, I tried to make it look as much as a line drawing as possible. I also wanted to bring focus to my eyes as I consider my eye liner (my eye makeup as I have been putting it on consistently for several years now) to be part of my identity. 

function setup() {
  createCanvas(600,600);
  background(255,255,249);

}

function draw() {

  //hair
  noFill();
  stroke(255,80,73);
  strokeWeight(8);
  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(140, 120);
  curveVertex(100,300);
  curveVertex(100, 530);
  curveVertex(220, 580);
  curveVertex(220, 500);
  curveVertex(125, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();
  line(300,30,300,75);

  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(460, 120);
  curveVertex(500,300);
  curveVertex(500, 530);
  curveVertex(380, 580);
  curveVertex(380, 500);
  curveVertex(475, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();

  stroke(255,80,73);
  strokeWeight(5);
  beginShape();
  curveVertex(300, 30);
  curveVertex(300, 30);
  curveVertex(140, 120);
  curveVertex(100,300);
  curveVertex(100, 530);
  curveVertex(220, 580);
  curveVertex(220, 500);
  curveVertex(125, 300);
  curveVertex(300, 75);
  curveVertex(300, 75);
  endShape();

//face
  noFill();
  stroke(255,178,217);
  strokeWeight(8);
  ellipse(300, 300, 350, 450);
  

  noFill();
  stroke('#00120B');
  strokeWeight(5);
  beginShape();
  curveVertex(350, 260);
  curveVertex(350, 260);
  curveVertex(375, 235);
  curveVertex(410,235);
  curveVertex(445, 260);
  curveVertex(445, 260);
  endShape();

  
  noFill();
  stroke(0);
  strokeWeight(3);
  beginShape();
  curveVertex(350, 260);
  curveVertex(350, 260);
  curveVertex(375, 275);
  curveVertex(410,275);
  curveVertex(445, 260);
  curveVertex(445, 260);
  endShape();
  
  //eyeliner - right eye
 
  fill(0);
  noStroke();
  beginShape();
  curveVertex(347, 260);
  curveVertex(347, 260);
  curveVertex(355,240);
  curveVertex(375,225);
  curveVertex(400,222);
  curveVertex(420,225);
  curveVertex(420,225);
  curveVertex(445,260);
  curveVertex(410,235);
  curveVertex(375,235);
  curveVertex(350,260);
  curveVertex(350,260);
  endShape();
  triangle(416,225, 475,240, 446,262)

   //left eye
   
   noFill();
   stroke('#00120B');
   strokeWeight(5);
   beginShape();
   curveVertex(250, 260);
   curveVertex(250, 260);
   curveVertex(225, 235);
   curveVertex(190,235);
   curveVertex(155, 260);
   curveVertex(155, 260);
   endShape();
 
   //under eye
  
   noFill();
   stroke(0);
   strokeWeight(3);
   beginShape();
   curveVertex(250, 260);
   curveVertex(250, 260);
   curveVertex(225, 275);
   curveVertex(190,275);
   curveVertex(155, 260);
   curveVertex(155, 260);
   endShape();
   
   //eyeliner - right eye
  
   fill('#00120B');
   noStroke();
   beginShape();
   curveVertex(253, 260);
   curveVertex(253, 260);
   curveVertex(245,240);
   curveVertex(225,225);
   curveVertex(200,222);
   curveVertex(180,225);
   curveVertex(180,225);
   curveVertex(155,260);
   curveVertex(190,235);
   curveVertex(225,235);
   curveVertex(250,260);
   curveVertex(250,260);
   endShape();
   triangle(184,225, 125,240, 154,262)

  //  pupils
  circle(215,245,35,35)
  circle(408,245,35,35)

  //eyebrows
  fill(0);
  beginShape();
  quad(257,185,170,180,170,190,255,200);
  endShape(CLOSE);
  triangle(170,180,130,200,180,190);
  endShape();

  fill(0);
  beginShape();
  quad(343,185,430,180,430,190,345,200);
  endShape(CLOSE);
  triangle(430,180,470,200,420,190);
  endShape();

  //nose
  noFill();
  stroke(223,253,255);
  line(290,240,285,340);
  stroke(223,253,255);
  line(310,240,315,340);
  arc(311,368, 90, 70, PI, PI + QUARTER_PI);
  noFill();
  stroke(223,253,255);
  line(290,240,285,340);
  stroke(223,253,255);
  line(310,240,315,340);
  endShape();
  arc(287, 368, 90, 70, -PI*1/4, 0);
  stroke()
  arc(300,430, 70, 30, 0, PI)
}

SooA Kim – Project 01

project1

//15-104, Section C
//SooA Kim
//sookim@andrew.cmu.edu

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

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

    //hair
    fill(0);
    ellipse(400, 330, 200, 250);
    ellipse(420, 450, 250, 250);
    ellipse(200, 350, 180, 220);
    ellipse(190, 460, 180, 180);
    ellipse(180, 570, 200, 200);
    ellipse(500, 560, 150, 150);

    //ears
    fill('#F5E0CD');
    ellipse(300, 320, 280, 150);

    //neck
    rect(255, 350, 100, 200);

    //face
    stroke(255, 255, 255);
    strokeWeight(3);
    ellipse(300, 300, 230, 300);

    //eyes
    noStroke();
    fill(0);
    ellipse (252, 280, 35, 35);
    ellipse (357, 280, 35, 35);

    //dot
    ellipse(357, 301, 5, 5);

    //eyelid
    noFill();
    stroke(0);
    strokeWeight(8);
    arc(245, 283, 57, 50, PI, TWO_PI);
    arc(350, 283, 57, 50, PI, TWO_PI);

   //mouth
    stroke('#C69C6D');
    strokeWeight(5);
    arc(300, 320, 50, 50, HALF_PI, PI - QUARTER_PI);

    //lips
    fill('#E55F55');
    noStroke();
    ellipse(310, 400, 40, 20);

    //hair bang
    fill(0);
    push();
    rotate(PI / 5.0);
    ellipse(385, -80, 250, 120);
    pop();
    push();
    rotate(PI / 3.5);
    ellipse(280, -45, 120, 230);
    pop();
    
    //body
    fill(50, 50, 50); 
    rect(150, 480, 320, 200, 50);

    //hair bang2
    push(); 
    fill(0);
    rotate(PI / 3.5);
    ellipse(610, -35, 150, 250);
    ellipse(670, 0, 250, 250);
    pop();
    fill(0);
    ellipse(170, 550, 150, 180);

     //earring
    fill(255)
    ellipse (180, 360, 12, 12);
    fill(255)
    triangle(165, 400, 180, 365, 200, 400); 
}

This was my first time generating an image by writing code. It helped me get familiar with coordinates in my canvas and realize the hierarchy/or lines to identify layers when you code in your text editor.

Nawon Choi— Project 01

nawon-portrait

// Nawon Choi
// Section C
// Project-01 Self-Portrait


function setup() {
    createCanvas(500, 500);
    background(220);    
}

function draw() {
    
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 500, 250);
    
    // head
    noStroke();
    fill("#6A6159");
    ellipse(234, 250, 395, 500);

    noStroke();
    fill("#6A6159");
    ellipse(312, 249, 302, 465);

    noStroke();
    fill("#F2E3C2");
    ellipse(255, 236, 356, 423);

    noStroke();
    fill("#6A6159");
    rect(122, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    rect(315, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    quad(128, 61, 303, 30, 200, 125, 54, 182);

    noStroke();
    fill("#6A6159");
    triangle(224, 16, 303, 30, 153, 57);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 500, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 500, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 500, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(163, 250, 175, 80, 29);

    // egg
    noStroke();
    fill("#F2BD39");
    rect(143, 224, 214, 53, 7);

    noStroke();
    fill("#F8D683");
    rect(143, 224, 214, 20, 7);

    // seaweed
    noStroke();
    fill("#424944");
    rect(235, 220, 30, 24);

    noStroke();
    fill("#27312B");
    rect(235, 244, 30, 33);

    noStroke();
    fill("#151916");
    rect(235, 277, 30, 53);

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(154, 198, 57, 46);

    noStroke();
    fill("#ffffff");
    ellipse(347, 198, 57, 46);
    

    // eyeballs
    let x1, x2, y;
    // let x1 = mouseX+153;
    //     x2 = mouseX
    //     y = mouseY-142;

    // LEFT x range: (142 - 166)
    // RIGHT x range: (335 - 359)
    // y range: (192 - 205)
    if (mouseY < 192 ){
        y = 192;
    } else if (mouseY >= 192 & mouseY <=205) {
        y = mouseY;
    } else {
        y = 205;
    }

    if (mouseX < 142) {
        x1 = 142,
        x2 = 335;
    } else if (mouseX >= 142 & mouseX <= 166) {
        x1 = mouseX,
        x2 = 335;
    } else if (mouseX > 166 & mouseX < 335) {
        x1 = 166,
        x2 = 335;
    } else if (mouseX >= 335 & mouseX <= 359) {
        x1 = 166,
        x2 = mouseX;
    } else {
        x1 = 166,
        x2 = 359;
    }

    noStroke();
    fill("#6A6159");
    ellipse(x1, y, 33, 33);

    noStroke();
    fill("#6A6159");
    ellipse(x2, y, 33, 33);

    noStroke();
    fill("#FAFAFA");
    ellipse(x1-4, y-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(x2-4, y-4, 12, 12);

    
}

I definitely wanted to have an interactive component for my self-portrait, so I made the eyes follow the direction of the mouse. Perhaps the most challenging part of this project was coding the values so that the eyeballs would stay within the range of the eyes. I thought for a while on what I wanted my self-portrait to look like, and ultimately, I decided to focus on my two of my favorite foods—eggs and sushi.