Week 1 – Self Portrait

Concept

My main objective was to create an accurate self-portrait of myself. To achieve this, I started by taking a photo of myself at the beginning of the assignment and then attempted to capture all the details I saw in the photo using p5.js. The challenge arose when it came to my wavy (almost curly) hair, as I needed to accurately depict its shape. Additionally, I spent a considerable amount of time figuring out what kind of facial expression to depict, I ended up doing “closed eyes” look since it looked better than the “open eyes” to me. I also focused on maintaining the correct proportions of my body in the portrait. In the end, I was pleased with the minimalistic aesthetic that emerged, as it seemed to align well with my personality.

Demo

Code Highlight (Hair area):

So this part is the part of the code that I am most proud of, maybe due to the fact that I spent so much time on it 🙂

It was the most challenging part of the code due to various reasons like lack of p5.js knowledge (I had to look a lot of stuff up), trying to make different shapes work in harmony and perfectionism stalling the productivity.

At the end, I tried to imitate a middle-part hairstyle using arcs and triangles (might not be the best way but I am fine with the end result).

Here’s the code snippet of the Hair class:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Hair class
class Hair {
draw() {
fill(0, 0, 0); // Hair color
noStroke();
arc(300, 205, 197, 170, PI, 0); // Top hair arc
fill(228, 177, 171); // Skin color
arc(300, 210, 50, 50, PI, 0); // Forehead section (mid-part separation)
fill(1, 1, 1); // Hair color
triangle(201, 205, 275, 205, 175, 230); // Left side bangs
rect(200, 205, 15, 45); // Left side hair sideburn
rect(385, 205, 15, 45); // Right side hair sideburn
triangle(326, 205, 400, 205, 430, 230); // Right side bangs
}
}
// Hair class class Hair { draw() { fill(0, 0, 0); // Hair color noStroke(); arc(300, 205, 197, 170, PI, 0); // Top hair arc fill(228, 177, 171); // Skin color arc(300, 210, 50, 50, PI, 0); // Forehead section (mid-part separation) fill(1, 1, 1); // Hair color triangle(201, 205, 275, 205, 175, 230); // Left side bangs rect(200, 205, 15, 45); // Left side hair sideburn rect(385, 205, 15, 45); // Right side hair sideburn triangle(326, 205, 400, 205, 430, 230); // Right side bangs } }
// Hair class 
class Hair {
  draw() {
    fill(0, 0, 0); // Hair color
    noStroke();
    arc(300, 205, 197, 170, PI, 0); // Top hair arc
    fill(228, 177, 171); // Skin color
    arc(300, 210, 50, 50, PI, 0); // Forehead section (mid-part separation)
    fill(1, 1, 1); // Hair color
    triangle(201, 205, 275, 205, 175, 230); // Left side bangs
    rect(200, 205, 15, 45); // Left side hair sideburn
    rect(385, 205, 15, 45); // Right side hair sideburn
    triangle(326, 205, 400, 205, 430, 230); // Right side bangs
  }
}

Reflection & Improvements for Future Work

The experience was quite enjoyable for me because, I was exposed to p5.js before, but it never went beyond some simple sketches, just messing around with the software, nothing serious.  Additionally, it felt like I was opening a new realm of coding. After completing handful of courses in Computer Science curriculum, coding started to associate with efficiency and work, not necessarily artistic vision/creativity, so I was delighted to work on something creative using code.

I always wanted to try to do digital portraits, previously I only did pencil portraits, but I never had the time or reason to do it until now. Discovering that I could make art with code was a delightful surprise. It made me realize I had missed out on a great way to express myself creatively. This experience has sparked a new interest in combining technology and art in my work, and I’m eager to explore this intersection more in the future.

Leave a Reply