Concept:

I’ve tried to show my personality as a night person through p5.js. At first, you can see how unsatisfied I am with the lamp being turned on, when clicked, I get happy! I also tried to make my glasses as a prominent feature of my face, as they’ve been with me for a very long time. It also showcases my love for dark mode, and dark themes, specially on digital displays.

I also implemented lower and higher opacity on the lens of my glasses as if they’re Photochromatic, which is something I’m particularly a fan of.

The unique check background is also symbolic of my interest in board games, specially chess.

How this was made:

This self-portrait was made multiple elements of p5.js such as arcs, rectangles, lines, ellipses, fills, strokes, and also a combination of push(), translate(), and scale().

I started with a simple circle using ellipse, the top and side hair using more ellipses and rectangles, then the specs (using multiple lines and rectangles), and eventually the smile (arc) and the chin (also arc). I reused some code from my draw_dude() function I worked on in last class for the body, while creating an original background using checks. The lamp was a bonus as I learned corner rounding in the process of making it look sleek, now it’s an integral part of what I’m trying to show as my personality.

My toughest challenge was actually colour theory, as I couldn’t get the background to match my skin and other elements. Also the face looks rounder than I preferred. This is where the push(), translate(), and scale() came in handy, I used it to slim down my face without redoing all the hardcoded values. Next time, I would be more inclined to declare variables early.

Code I am Proud of:

To be honest, I’m proud of the entire codebase for this portrait, but if I had to pick, I’d choose draw_specs:

function draw_specs(pos_x, pos_y, size, theme = "light"){
  if (theme == "light"){
    fill("#00000080");
  } 
  if (theme == "dark") {
    fill("#00000030");
  }
  stroke("#90D5FF");
  rect(pos_x + size/10, pos_y - size/25 + 2, size/2);
  rect(pos_x - size/1.7, pos_y - size/25 + 2, size/2);
  
  stroke("#404040");
  strokeWeight(2);
  line(pos_x - size/3, pos_y - size/25, pos_x + size/3, pos_y - size/25);
  line(pos_x - size/10, pos_y + size/8, pos_x + size/10, pos_y + size/8);
  line(pos_x + size/10 + size/2, pos_y + size/8, pos_x + size, pos_y + size/5);
  line(pos_x - size/1.7 - size/2.4, pos_y + size/5, pos_x - size/1.7, pos_y + size/8);
}

The feeling of drawing my favourite accessory on a digital screen using code was very rewarding in itself. Each line and shape was simple yet intentional.

Reflection:

As a Computer Science major, I’m often induced to work on delivering an output or solving a problem. I’ve never had the opportunity to pay undivided attention to the visual elements, instead of just the functional ones. So while doing this, I realised the very essence of what I like to see as a software developer, and being able to convey my personality through my projects. It’s one of the few assignments I’ve genuinely had fun finishing.