For my project, I decided to present myself from the perspectives of my closest friends. As in, I gathered all the descriptive words and little jokes they’re made about my appearance. Ever since I changed my hair and got bangs, I’ve been called “Dora The Explorer”, hence my avatar is inspired the character from the childhood show. Moreover, I can’t hide my expression, so if I’m feeling something, my whole face contorts to a completely different person, almost. I was told I “look a different race” when I laugh the hardest, with my eyes closed shut and teeth bared out, hence the title.

let currentView; 
//defining a variable, which is going to decide what is going to be displayed 

function setup() {
  createCanvas(570, 400); //making a landscape scene
  currentView = noLaugh(); //the initial view is set to my resting face, variable is defined to a value 

} 
                  
function mousePressed() //when the mouse is clicked 
{ 
  if (mouseX > 212 && mouseX < 350 && mouseY > 285 && mouseY < 400) //setting limits to where you can click to make the view change 
  { 
    currentView = meLaugh(); //initial view changes because the variable is defined to another value 
  }
} 
function mouseReleased() //when the mouse is released 
{ 
  currentView = noLaugh(); //view changes to initial setting 
}

In my work, the snippet that I found the hardest to figure out and code is the angle and rotation of “waves”, nose and basically all the features of my face. But a piece of code that I’m incredibly proud of is making my sketch somewhat dynamic. After watching some youtube videos, I had it down. Since I’m ticklish, I added that element into my avatar, where if you click the mouse in certain parts of my body, the display changes to me laughing, from the usual death stare.

Although creating this project was fairly simple, I’d like to work more on limiting the “mousePressed” coordinate to specific areas, using a nested function if possible, rather than just putting coordinates of a regular rectangle. I would also like to work more on making smoother shapes with shading, instead of blocks of shapes on top of the other.

My idea was to create a portrait that represents growth, experience, and the things that shape us. Instead of a face, I wanted to make my self-portrait a fluid, continuous scene, through which we see the diorama of a life being lived.

• The Tree: Me. It starts as nothing and grows over time, with its branches reaching out in unique, unpredictable directions. Its placement on the field is random, symbolizing the random circumstances we’re all born into.
• Yellow Lights: These are the fleeting, positive moments. They could be ideas, bursts of inspiration, happy memories, or moments of creativity. They fall gently, glow for a while, and then fade away, leaving a subtle impression but more deeply, imprints on the tree leaves that catch them.
• Grey Stones: These represent the heavier, more permanent things in life. They could be foundational beliefs, significant life lessons, or more often than not, burdens and responsibilities. They fall with more weight, and once they hit the ground, they settle and become part of the landscape permanently. A sufficient number of stones would pave a road through the screen, from left to right.

The entire process is automated. I press play, and the code “paints” the portrait for a set amount of time before freezing, leaving a final, static image that is unique every time it’s run.

The choice of background was a key point of hesitation during the creative process. I first tried a pure black canvas, but the branches and their few leaves seemed too sparse and lonely. My next step was a semi-transparent black background, which created lovely trails but didn’t feel quite right visually. I finally settled on a semi-transparent dark grey, as it softened the high contrast while preserving the beautiful “ghosting” effect.

Below is the first version of the background.

One of my favorite tiny inventions for this project was a simple interactive feature that lets you control the flow of time: By simply holding down the mouse button, the entire animation slows to a crawl, creating a quiet but reflective moment on the scene as it unfolds. It doesn’t alter the final portrait, but it changes how you experience its creation.

// Mouse press animation, simple but I found quite effective
if (mouseIsPressed === true) {
  frameRate(10); // Slow down the animation
} else {
  frameRate(60); // Resume normal speed
}

Assignment 1 – Self Portrait

For this weeks assignment, I wanted to create a simple image of myself but have the mood / expression and weather change depending on the user’s interactivity. As a hijabi, I like to change the colour of my hijab and so I wanted it be changeable by the user pressing the mouse. I also enjoy the city life so I wanted to replicate some sort of simple skyline.

Emotions

I decided to go with 4 different emotions inspired from the following emojis.

cheesing. I wanted this one to be me at my happiest with a simple rainbow in the background.

sad. I wanted it to rain in the background and have my facial expression be a simple upside down arc.

neutral. I wanted this one to be me just meh, with nothing interesting in the background.

happy. I wanted this one to be me just normally happy with the sun in the background.

Previous coding experience with p5.js

I took Decoding Nature with Aya so I have had exposure to replicating natural patterns in p5.js so I wanted to replicate the rain pouring down with my old skill set learnt from her class.

For the rain pouring down effect,  I wanted to have simple white lines

// Draw rain
stroke(255, 255, 255); // 'white' rain
strokeWeight(2);
for (let i = 0; i < 20; i++) {
  let x = random(0, 600);
  let y = random(0, 400);
  line(x, y, x + 1, y + 5); // rain drops
}

Here I am generating lines and having their starting (x,y) coordinates randomly generated from any x coordinate of the screen and y coordinates of 0 to 400. I then have the line stretched out a little to the x by one pixel to create a more angled look.

For the eyes, I wanted them to also be interactive so I made them follow the cursor of the user.

else {
      // normal eyes - white background and black pupils that follow cursor
      noStroke();
      
      // white eye 
      fill(255);
      ellipse(270, 180, 25, 25); 
      ellipse(330, 180, 25, 25); 
      
      // black pupils that follow mouse
      fill(0);
      
      // calculate pupil position based on mouse location
      let leftEyeX = 270;
      let leftEyeY = 180;
      let rightEyeX = 330;
      let rightEyeY = 180;
      
      // calculte teh angle from eye to mouse
      let leftAngle = atan2(mouseY - leftEyeY, mouseX - leftEyeX);
      let rightAngle = atan2(mouseY - rightEyeY, mouseX - rightEyeX);
      
      // LIMIT pupil movement within eye bounds
      let pupilDistance = 4;
      
      let leftPupilX = leftEyeX + cos(leftAngle) * pupilDistance;
      let leftPupilY = leftEyeY + sin(leftAngle) * pupilDistance;
      let rightPupilX = rightEyeX + cos(rightAngle) * pupilDistance;
      let rightPupilY = rightEyeY + sin(rightAngle) * pupilDistance;
      
      // drawing the pupils
      ellipse(leftPupilX, leftPupilY, 8, 8); 
      ellipse(rightPupilX, rightPupilY, 8, 8);

From decoding nature, we learnt how to have particles follow our cursor by making use of the mouseX, mouseY variables. I had the pupils initial X,Y coordinates be the same as the white circles and then limit their distance to 4 so that they don’t go out of bound of the white circles.

The use of atan2() is used to calculate the angle from each eye center to the mouse position and returns an angle in radians. It is then used in the sin and cos formulas with basic trigonometry to create a new X,Y coordinate. Because the value of sin and cos will always be between -1 and 1, when multiplied by our pupilDistance (constraint we implemented earlier)  it will never go out of bound of the white part of the eye.

Final solution

My look-alike animal I chose to portray myself is an owl. It didn’t have to be an animal, but I chose it simply because I like cute animals. It was tough trying to pick between an owl and a raccoon, but I stuck with an owl because when I during my military service, my teammates called me “angry bird” because of my sharp-looking eyebrows. The fact that I was bold probably made it worse. I combined both “angry bird” and owl to create “angry owl”.

Simplistic, but straight to the point. I added 2 animations during my work on this project. Please feel free to find both of them.

I love working at night because it’s quiet and it’s the time of day when I feel most focused. So if you try to get the owl’s attention by clicking, it will lift its eyebrow as a warning. It’s a do-not-disturb signal.

//eyebrow only moves at night
 if (!morning && eyebrow) {
   move += direction * 1.2; //speed of animation

   if (move <= -20) { //moved distance is max 20, if greater, change direction to go down
     direction = 1;     
   }
   if (move >= 0) { //when it reaches its original position
     move = 0;
     eyebrow = false;   //stop animation
     direction = -1;    //reset direction
   }
 }

That is the animation code for the eyebrows. One of the hardest parts of this code was changing the direction of the movement. If the position changes by 20 pixels, then it changes the sign of the direction so that it goes in the opposite direction. It was also difficult to trigger the animation. I have two animations that are played in different conditions: night and day. So coordinating the timing was probably the most difficult part of coding. I will explain the coordinating part after showing the code for morning animation.

(Explanation of Code, Skip this if this is a bit boring)

move+= direction is for the speed of the animation. But the sign of the direction indicates whether it goes up or down. If the animation moves for 20 pixels upwards, it satisfies the first condition, and the sign is changed. It was set to -1 before. So now, the eyebrow moves downward back to its original position. Since the sign has flopped, move slowly turns positive as it goes through the move+=direction line. At some point, it will reach 0, where the variable named eyebrow, which is set to true when the user clicks on the owl, turns false, and the direction changes to positive.

As you could guess, if you click on the moon, it changes the time of day. Also, if you click on the owl during the day, it will show the ZZZ animation.

function mousePressed() {
  //if position of sun/moon is pressed
  if (dist(mouseX, mouseY, X, Y) <= D) {
    //change day/night
    morning = !morning;
    //stop eyebrow
    eyebrow = false; move = 0; direction = -1;
    return;
  }

  // start Z animation in morning
  if (morning) {
    zActive = true;
    zStart = millis();
    return; // don't trigger eyebrows
  }

  //night means eyebrows haha
  if (!eyebrow){
    eyebrow = true;
  } 
}

I used two flags to trigger the animation: zActive and eyebrow. I set these values to true when the screen was clicked based on the time of day. I also had to carefully coordinate so that the flags were triggered where I wanted them to be.

(Explanation of Code)

When the mouse is pressed, it first checks if the user clicks on the area where the sun and moon are placed. If it is, then moring = !morning changes from day to night, vice versa. When the time of day changed, I made sure once again to reset variables just in case the animation plays. Now, if that was not the case, and the user clicks, it checks if it is morning or night. If it is morning, the zActive variable is set to true, and this sets off the ZZZ animation. If it is not morning, then it sets the eyebrow flag to true, which triggers the eyebrow animation. Figuring out this logic was probably the most difficult part of the code.

Finally, this is my ZZZ animation. 

/ZZZ animation
if (morning && zActive) { //only when morning and user clicked
  const elapsed = millis() - zStart; //measure time

  //number of Zs
  let visible = 0;
  if (elapsed >= 0){
    visible = 1;
  }
  if (elapsed >= 300){ //basically every 300ms, add one
    visible = 2;
  }
  if (elapsed >= 600){
    visible = 3;
  }

  ZZZ(width/2 + 70, height/2 - 120, visible);

  // after all Zs have appeared and held, hide all at once
  if (elapsed >= 3 * 300 + 600) { //600 is extra time just in case
    zActive = false; // disappears together
  }
}

I used millis(), which is used to measure the timing of animation. I wanted the Zs to play out one by one, so I had to time them by 300ms. The logic here is quite straightforward. 

function ZZZ(x, y, count) {
  noStroke();
  fill(0);                
  textAlign(LEFT, BASELINE); //aligns text to left and at baseline of font
  
  if (count >= 1) {
    textSize(20); 
    text('z', x, y); 
  }
  if (count >= 2) { 
    textSize(24); 
    text('z', x + 12, y - 12); 
  }
  if (count >= 3) { 
    textSize(28); 
    text('z', x + 28, y - 26); 
  }
}

This is the helper function to create the ZZZ effect. visible and count shows how many Zs are present, and it is incremented with time elapsed, measured with the millis function. Any further explanation of the code can be provided in class. 

For improvements, I was thinking about adding another condition. For now, when the owl is disturbed, it just repeats the animation. However, adding another animation when the owl is disturbed more than 10 times might be interesting. Owl spreading its wings and flying away sounds good. 

P.S. I was scrolling through the posts and found a post that is quite similar to mine (haha), although the contents were totally different. It was nice to see a fellow owl.

Our hometask for the first week was to create a self portrait to practice using the simple drawing functions in p5js. For the assignment, I had an idea to use my avatar in Duolingo as a refernce. I really liked my Duolingo avatar — the colors, the shape, and the style, thus recreated it while adding more ideas.

The colors in the avatar are yellow for the background and orange for the dress. The avatar has smiling eyes that are curved at the bottom, along with sparkles. For the body, I simplified the design by making the head float, rather than directly being attached to the body. The idea of a floating head came from one of my chilhood cartoons Phineas and Ferb.

The curls and the curious expression with sparkles in the eyes are the highlights of the portrait. I am proud of myself for thinking off using human face color circles under the eyes to give the impression of smiling eyes. Drawing the curls also proved to be not a straightforward task, with me adjusting and readjusting the position and size of each brown circle untl  achieved the look I wanted.

In my future works, I could make the design interactive, so the art changes color or moves as the viewer comes into contact with the work. In terms of the design itself, I can use codes like arc() and  rotate(), adding more creativity to the work.

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

function draw() {
  background(255, 241, 167); // yellow bg

  // Face --------------------------------------------------->
  fill(255, 226, 214); // face color
  rect(200, 120, 200, 150, 40); // face shape
  
  
  // Eyes --------------------------------------------------->
  fill("white"); 
  ellipse(width/2 - 40, height/2 - 20, 75, 70); // left eye
  ellipse(width/2 + 40, height/2 - 20, 75, 70); // right eye

  // Pupils
  fill(61, 61, 61); // dark pupil
  ellipse(width/2 - 40, height/2 - 20, 45, 45); // left
  ellipse(width/2 + 40, height/2 - 20, 45, 45); // right

  // Blue part of pupil
  fill(57, 94, 130, 200); 
  ellipse(width/2 - 40, height/2 - 10, 35, 30); // left
  ellipse(width/2 + 40, height/2 - 10, 35, 30); // right

  // Sparkles
  drawSparkle(width/2 - 35, height/2 - 27, 15); // left eye sparkle
  drawSparkle(width/2 + 35, height/2 - 27, 15); // right eye sparkle

  // Under-eye curves 
  fill(255, 226, 214); 
  ellipse(width/2 - 40, height/2 + 20, 90, 60); // left
  ellipse(width/2 + 40, height/2 + 20, 90, 60); // right

  // Nose --------------------------------------------------->
  fill(248, 172, 148); // nose color 
  beginShape(); 
  vertex(width/2, height/2 - 10); // top 
  vertex(width/2 - 7, height/2 + 10); // left 
  vertex(width/2, height/2 + 17); // bottom 
  vertex(width/2 + 7, height/2 + 10); // right 
  endShape(CLOSE);

  // Mouth --------------------------------------------------->
  fill(179, 93, 110); // lip color
  ellipse(width/2, height/2 + 45, 20, 20); // lip position
}

// sparkle in the eye function ---->
function drawSparkle(cx, cy, size) {
  fill("white"); // sparkle color
  quad(
    cx, cy - size/2, // top
    cx + size/2, cy, // right
    cx, cy + size/2, // bottom
    cx - size/2, cy  // left
  );
  
  // circular sparkle
  fill("white"); // circle sparkle color 
  ellipse(width/2 - 50, height/2 - 15, 8); // left 
  ellipse(width/2 + 50, height/2 - 15, 8); // right
  
  // HAIR --------------------------------------------------->
  fill(84, 54, 41); // hair color
  // Top
  ellipse(width/2, height/2 - 120, 120, 90); // top middle
  ellipse(width/2 + 60, height/2 - 115, 110, 85); // top right 
  ellipse(width/2 - 60, height/2 - 115, 110, 85); // top left 

  // Left 
  ellipse(width/2 - 120, height/2 - 60, 90, 100); // left top 
  ellipse(width/2 - 140, height/2 + 10, 95, 110); // left bottom 
  

  // Right 
  ellipse(width/2 + 120, height/2 - 60, 90, 100); // right top 
  ellipse(width/2 + 140, height/2 + 10, 95, 110); // right bottom 
 

  // BODY --------------------------------------------------->
  fill(243, 161, 63); 
  ellipse(width/2, height - 10, 170, 200); // body position 
}

 

 

CONCEPT:
For this assignment, I built a self-portrait entirely out of shapes in p5.js. I wasn’t trying to make something realistic, instead, I went for a cartoon version of myself: a round face, messy hair, glasses, and a simple smile. The idea was to see how much “me” I could get across with just ellipses, arcs, and lines. The output is far from realistic; come on, I am not trying to replace my passport photo with this. The portrait is simple, but I like how it balances between looking generic and still recognizably like me.

HIGHLIGHTED CODE:
The glasses ended up being my favorite part. Without them, the face felt empty, but adding two circles and a line suddenly made it feel right:
  noFill();
  stroke(0);
  strokeWeight(3);
  ellipse(167, 170, 60, 60);
  ellipse(233, 170, 60, 60);
  line(200, 170, 200, 170); // bridge

REFLECTION AND FUTURE WORK:
This was my first attempt at drawing myself, and that too using code; and it showed me how powerful even basic shapes can be. It doesn’t need shading or complex details to read as a face, and luckily identify a person if the components are placed right.

However, if I had more time, I’d like to:
– Make the eyes blink or move with the cursor (saw many do that, i can’t just yet)
– Give the background more personality
– Fix the hair so it looks less like a helmet and more like actual messy hair (pretty doable with multiple ellipses but i reckon there are more efficient ways)
Even with its simplicity, I like how it turned out, it’s definitely not a mirror image, but it’s “me” enough.

Concept

For the self portrait I decided to show not exactly my picture, but the picture of my inner animal.

Initially, I drew a sketch of myself, holding a camera, because photography is on of my favorite hobbies. However, I then thought of giving more meaning to my portrait, because I had a call with my mom and remembered how she always called me an owl when I was a child (reason being my sleep schedule that is still very bad). So I thought, if my sleep schedule harms my health, let me at least use it to benefit my academics.

my initial sketch

what I decided to create

Creation

It was a little challenging for me to get started on p5.js, because of my limited coding skills, but after some experiments I was able to actually create something using simple circles, triangles and lines. One of the most challenging parts was creating the feathers on my Owl’s body, so I used some help from AI. I tried not to simply copy the code, but learn how to do it on my own as well. And because this was one of the most confusing part for me, I am proud because I eventually created it.

Interactivity

I made my drawing clickable: the owl sleeps during the day but if you click it, night comes and it wakes up (just like me).

Improvements

There are a lot of things I would like to improve in my project, one of them being enhanced interactivity. I would love to add moving clouds, more complex shapes for the owl, stars at night, and many others things that could make my owl more “likable”.

Concept

I started the idea of pixel art with this piece of wooden pixel art that we mentioned in our first class(Wooden Segment Mirror). I’m also recently obsessed with Perler Beads(plastic fusible beads to form patterns and fuse together with an iron). So, I pixelated one of my self-portraits and created a canvas of 10 * 12 colored squares.

To make it more interactive, I also use the mouseClicked function to add a more immersive version to get rid of the pixel stroke.

Code Highlight

I’m particularly proud of the color list. When I just started, I wanted to do an automatic color picker program to create the list for me. However, after a few trials, all the available auto ones cannot handle many colors, either giving a fake hex code or a single palette with a maximum of 10. Then, I did some research on manual color pickers, and I found this one(https://colorpickerfromimage.com/) to be the best hex color picker shortcut among all. Since I had to manually picking up all the colors, it also pushes me to optimize other parts of my code to use less repeated manual calls but using the loop to create all the squares.

let colors = ["#9194a6","#7d7d8f","#c29c8e","#e8bc9e","#ebbe9e","#dcac8c","#a38572","#5b585a","#5b585a","#c0cc66","#767787","#736f79","#c19a88","#e7b691","#edbb93","#daa884","#a5846d","#5b5350","#685d56","#dfe1b5","#676672","#6c6266","#ab8273","#ab8273","#e5af83","#927466","#7c6258","#544944","#665a52","#bea7a9","#5c5258","#6c5554","#a17d68","#db9f7e","#e8b08a","#5e4540","#785145","#544139","#665c56","#cecccf","#5c4b4a","#b57b64","#de9b79","#e5aa8a","#e6a68d","#d09375","#c18067","#5c443a","#6a5c57","#ccc7c9","#674e46","#cd8e6a","#eaa67d","#e1a286","#e7ab93","#e6a880","#d8946e","#5c4035","#544b47","#cdcdd3","#543d36","#d7996a","#e9ae7e","#e0a17b","#d08b5d","#e0a46d","#d39560","#3b2922","#49423b","#ccc7c4","#372623","#c28b5c","#d5936e","#c6735c","#c67255","#d59761","#7f5535","#34231c","#3a2c23","#625c43","#33221e","#644430","#e4a976","#da8667","#da7c5e","#af794d","#341d13","#39261d","#3b281e","#3b281e","#39251e","#5d402d","#d29e74","#d59d6d","#a6754b","#2b1810","#2b1b14","#422c1e","#4c3626","#28190a","#4d372d","#694735","#d09c74","#d29d72","#7c593e","#362822","#3a2b24","#442f21","#78614d","#4d3b26","#4e382f","#6a4833","#d69a74","#c99874","#49362d","#2f221f","#3c2f2b","#402d20","#876e51","#83735c"]

I also think the way p5.js displays these hex codes is another piece of art that breaks down the color of me into hex code pieces.

Reflection

For my future works, this work reminded me the importance of planning before starting. Digital art is a more well-planned process compared to free-form drawing on papers. This time, I began by creating all the squares manually, but soon I realized how redundant that was. So, I turned back to a draft note to jot down the ratio calculations. Overall, the process of choosing colors and planning turned out to be quite meditative.

(Try Clicking on the Mouth when it’s Open!)

I had a few ideas of how I wanted to depict myself, none of which included a real depiction of my face, but more or less characters that I resonated with. I quickly scrapped that idea when I felt like it wouldn’t really be challenging me if I drew a depiction of an already existing illustration.

With my limited coding experience it would be certainly difficult to go from concept into actualization using just my keyboard and the funny colored words on screen, but I was committed to making something worth looking at.

One of the first things I tried to understand coming from a long photoshop/graphic design background was how layers would work on p5.js. Understanding this early gave me a lot of confidence that I wasn’t going to make something uncanny-looking. I made each body segment its own function and called it in the order from the lowest layer to the highest layer in draw()

function draw() { //draw runs on loop 60/sec
  background(110,40,80);//change later?
  
  //Draws Body Parts in Layers
  drawHair();
  drawTorso(90);
  drawHead();
  drawLeftEye(6.7);//parameter is for gap between lines
  drawRightEye(6.7)
  drawMouth();
  drawHands();
  drawBangs();
}

As I learned more about p5.js through tutorials, I wrote down lots of notes and reminders to myself. One tip that really helped me out initially was putting fill() before the shape I wanted to draw. When I was listening to the demonstration in class I thought it would make more sense for fill() to have parameters for what you wanted to fill, but after working with the shapes today I realized that would’ve caused a big confusing wall of text very quickly. Putting notes next to how many parameters and what each parameter did for each function was also really helpful in my learning process.

I wasn’t quite sure how to depict the face at first with just simple geometry but by removing the outline “strokes” and blending shapes I started sculpting some much nicer shapes.

I really wanted my avatar’s arms to be interactable with the user’s mouse values so I initially allowed the top Y-positions of the arm segments to be controlled using the mouse. I obviously didn’t want it to go out of bounds so I looked through the p5js reference until I found the constrain() function. This was a huge lifesaver for both this aspect of the self-portrait and some other aspects I worked on after this.

let armY = constrain(mouseY, 430, 500); //restricted value, min, max
  let armX = constrain(mouseX, 200, 350); 
  
  //LEFT
  quad( 
    armX-60, armY, //top left 220~
    armX-10, armY+20, //top right 280~
    220, 600, //bottom right
    100, 600  //bottom left
  );
  //RIGHT ARM
  quad( 
    armX+110, armY, //top left 380~
    armX+60, armY+20, //top right 320~
    width-220, 600, //bottom right
    width-100, 600  //bottom left
  );

This snippet was taken as I was working out the arm animation and tracking. Mini-me was very deprived of any type of hair back then. He was also very gray.

I feel like the hand movements made the avatar feel so much more alive and responsive, making good use of p5.js in ways beyond just turning code into still images. This would go a step beyond when I added the cookie into mini-me’s hands then another step beyond when the mouth would respond to having a cookie in front of it.

//COOKIE
fill(210, 180, 140);
stroke(190, 160, 120);
cookieX = armX+25
//main cookie area
if (cookieEaten) {
  arc(cookieX,armY,150,75,5.7,3.5) //cookie missing the top corner
  console.log("Cookie was Eaten")
} else {
  arc(cookieX,armY,150,75,0,2*PI) //a full cookie
}
//chocolate chips
fill(90, 60, 40);
noStroke();
//top left to bottom right
ellipse(cookieX-50,armY-10,19,14)
ellipse(cookieX-21,armY-2,16,10)
ellipse(cookieX-37,armY+10,12,7)
ellipse(cookieX+3,armY+8,17,12)
ellipse(cookieX+22,armY-6,12,8)
ellipse(cookieX+29,armY+20,15,10)
ellipse(cookieX+38,armY+2,18,13)

At first I didn’t have any chocolate chips on the cookie and my friend thought it was holding an empty plate so I decided to add some chocolate chips even though the way I did it was probably not very efficient. I considered using random variables like I’ve seen some previous projects utilize for their backgrounds but the choco chips needed to avoid a very specific area of the cookie that would be “bitten” into while looking well balanced.

One of my goals with the cookie in hand was to let the user be able to eat it by clicking on the mouth of mini-me, but I didn’t know how to program a bite mark into the ellipse so I decided to change it into an arc() halfway through and use the arc’s unique properties to cut out a portion of it near the mouth, making it appear like it had been bitten into. I was pretty proud of how I worked with my limited knowledge here.

cookieEaten = false
function mouseClicked() {
    console.log(mouseX,mouseY)
    if (mouseX > 280 && mouseX < 320 && mouseY > 330 && mouseY < 400){
      cookieEaten = true; 
      console.log("clicked mouth");
     }  
  }

//lots of stuff here in between in the real code...

if (cookieEaten) {
    arc(cookieX,armY,150,75,5.7,3.5) //cookie missing the top corner
    console.log("Cookie was Eaten")
  } else {
    arc(cookieX,armY,150,75,0,2*PI) //a full cookie
  }

By far the most unsatisfying part to me was definitely the way I did my hair. There were just so little polygons to work with to properly express what type of hairstyle I wanted for mini-me. However, a lot of my friends said they actually really liked how I depicted the hair so perhaps I’m fixating on it too much.

My biggest regret was that I only learned after I was nearly done with my self-portrait that I could’ve changed the angleMode() to degrees the whole time… I spent so much time trying to remember middle school math just to work out the PI angles for certain arcs.

//the upper lip
arc(cenX - 210/4, faceCenY, 150, 150, PI/4, PI/2); //left side
arc(cenX + 210/4, faceCenY, 150, 150, PI/2, 3*PI/4);//right side

If I were to do this exercise again, I would probably create more variables to make certain parameters look a little more organized and efficient. I changed a few parts to stuff like “width-X” rather than calculating it myself but there was definitely more I could’ve done to make everything look cleaner.

Overall for my first experience with p5.js and my limited experience with JavaScript , I think I would be proud of myself even later down the line.

The moment a friend joked that I’m “basically a flower,” while I was brainstorming ideas for this task, I knew exactly what I wanted to draw! A happy, cartoon daisy standing in for my portrait. Instead of wrestling with a realistic self-portrait, I leaned into something more playful and honest, something that resembled me in being bright, a little goofy, and imperfect in the best way. That choice took the pressure off and made the assignment fun, I wasn’t proving I could render a realistic portrait, but rather show a bit of personality.

Color was deliberate in this portrait. I picked a soft pink background (`#fae`) because it feels light and friendly, like a page from a sketchbook. The petals are white with a clean black outline because daisies are my favorite and that crisp edge gives a bold, sticker-like cartoon look. The center is a warm yellow (classic daisy!), and the stem is a saturated green so it reads immediately even at a glance. Together, the palette stays simple, cheerful, and high-contrast, perfect for for clarity on screen.

There were two small decisions that made a big difference. First, was the draw order: I coded the petals before the center so the yellow circle sits neatly on top. p5.js applies fill and stroke at the exact moment you draw, so layering matters, getting that step right eliminated messy overlaps without extra code. Second, the smiley face: two tiny circle calls for eyes and a single arc for the smile gave the flower a personality however this was probably the hardest part. I watched a few YouTube videos about coordinates which is how I learned to use “cx” and “cy” so I wasn’t typing magic numbers everywhere (much easier to tweak).

The smiley face was the specific piece of code that I was proud of. I know it looks very simple but it definitely took me the longest time to get right without looking completely wonky!

// Smiley
 const cx = 300, cy = 200;
 fill(0); noStroke();
 circle(cx - 20, cy - 15, 12); // left eye
 circle(cx + 20, cy - 15, 12); // right eye
 noFill(); stroke(0); strokeWeight(4);
 arc(cx, cy + 15, 60, 40, 0,PI);

What went well: I kept the geometry minimal (lines, ellipses, and circles). The result feels cohesive: the color palette, the outlines, and the proportions all read “cartoon daisy” immediately. What I could have done better: the petals aren’t perfectly placed since I originally wanted to do 5, and they look kind of odd, some spacing could be cleaner. I wish I had more time to work on this so I could adjust the shapes to my liking.

Looking ahead,  I’d also like to add motion, a subtle stem sway maybe or a smile that reacts on hover/click. Or perhaps, adding clouds or a sun in the background. For now, I’m happy that it isn’t perfect, neither am I, and that’s kind of the point. I’m still getting into the rhythm of JavaScript, and this little daisy felt like the right way to bloom.