Category: F2025 – Mang

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.

As someone who grew up watching suspense, mystery, and thrillers, I have always had a love for the unknown . It is practically part of my personality at this point. So for my self-portrait, I wanted to bring in that sense of intrigue.

When the sketch first loads, you see an anonymous figure – a faceless, question-marked silhouette. But if you click anywhere on the canvas, the figure is replaced by a self-portrait. Click again, and it disappears back into anonymity.

On the surface, it is a fun interactive switch. But on a deeper level, I think it reflects something more personal: the idea that people can choose to know you  or not. Maybe someone clicks, sees the portrait (a glimpse of who I am), and then clicks again to hide it. Maybe they don’t want to see me. Or maybe, like in real life, they’re unsure if they’re ready to know the full picture.

I guess that is the suspense in being known . Once someone sees you, they can never unsee you. But they can still choose to look away.

Here is my sketch.

The part of my code I am most proud of is the use of a boolean and if…else logic to toggle between the anonymous and self-portrait modes when the user clicks on the canvas.

function draw() {
textAlign(CENTER, TOP);
textSize(12);
noStroke();

if (showPortrait) {
background(255);
fill(0);
text('click to hide', 200, 50);
drawPortrait();

} else {
background(0);
fill(255);
text('click to reveal', 200, 50);
drawAnonymous();
}
}

function mousePressed() {
showPortrait = !showPortrait;
}

I am also quite proud that I managed to create a relatively expressive smile using just one line of code. It is simple, but adds a lot of personality in I think.

arc(200, 330, 30, 10, 0, PI, CHORD);

For future improvements, I would love to build on the toggle idea by introducing multiple personalities or moods instead of just a binary switch between anonymous and self-portrait. I believe everyone reveals different layers of themselves depending on the environment or the people around them. It would be really cool if the portrait could reflect that. For example, changing facial expressions, clothing, or color schemes to represent different sides of my personality: serious, playful, thoughtful etc. This would add both depth and relatability to the sketch.

My Concept

A self-portrait should show that part of you that makes you who you are, right? My concept was to depict myself ‘normally’, but when the user clicks on the canvas, they are shown a side of me that not many people know about. I am actually a HUGE ocean nerd: marine life, ocean sustainability, deep exploration, I’m a sucker for it all. Consequently, I also love diving!

So, clicking transports me with my diving gear under the water! My eye shape changes to depict how happy I am and I think the bubbles bubbling upwards is a cute touch.

Code I’m proud of

// bubbles
noStroke();
fill(255, 255, 255);
for (let b of bubbles) {
  ellipse(b.x, b.y, b.size);
  b.y -= b.speed;   // move bubble upward
  if (b.y < -20) {  // reset if off screen
    b.y = 145;
   }
}

I really like how I animated the bubbles to float upwards and out from the snorkel and continue to regenerate. I was already familiar to how to implement such a logic due to my previous coding experience, but it definitely took a bit of trial-and-error to figure out the initial placement, size, and speed of the bubbles.

 My Sketch

Reflection

For future improvement, I would really love to add a kind of gradient of different shades of blue to enhance the underwater effect. I also think it would be pretty cool to have more animations, such as tiny fishes swimming in the background (and maybe a shark).

I think this assignment was particularly fun because I got to use JavaScript in a different creative manner compared to what I am used to. I was able to see my idea come to life just through simple shapes and colors! Overall, this self-portrait is an expression of a space I really care about and hope to get other people to care about too. Help keep our oceans clean, thank you!

My concept was to depict myself as an angry circle. When I’m provoked I get and increasingly large.

This part is particularly amazing

if (mouseIsPressed) {
  fill("red");
  circle(mouseX, mouseY, bigCircleSize);
} else {
  fill("green");
  circle(mouseX, mouseY, 50);  
}