“I am my own muse. I am the subject I know best. The subject I want to know better.” — Frida Kahlo

Concept:

For our very first assignment in Intro to Interactive Media, I was able to make a portrait of myself, using only simple 2D shapes, through the use of p5.js’ functions. My main goal was to try an recreate as many facial features about myself, such as my lush, green eyes. Also I added some clothing with a color which sort of, compliments my eyes.

Below is my finished portrait:

How it’s made:

The portrait was made using p5.js’ functions for 2D shapes. I made good use of ellipse, quad, arc, circle mostly as they helped me get a good grasp of how I would shape my face.

Starting out though was actually difficult, as I was confliced of whether it would be best to use a circle or an ellipse for my facial structure. Of course both would work out, but I chose the ellipse as it made more sense for me, as I could add get a better shape to add external features, such as my ears or hair.

Then it was a simple case of designing my face out. I used ellipses for my sclera, and a circle for my pupil and iris. I used ellipse for my nose (though I was considering using a triangle too). And for my shirt I used a few quadilaterals to make the shape of my body. As for the shoulders, I used ellipses that are slightly raised and feel more natural.

Now I did have a few struggles whilst creating the portrait, such as positioning the shapes. I started out using the width and height arguments and then having them positioned by either adding or subtracting a given value. Whilst this worked for a while, it was cumbersome as to figure out the starting and end points of where I wanted my shapes.

But then is when I used my smart head for once and thought

“Wait, I can use the print function to see the exact coordinates of the canvas, so I can see where I can pop my x and y coordinates”

So afterwards for some of the shapes in the code I decided to simply use exact values in order to make my life easier haha. This was done just by using the print function to print out the current position of the mouse using mouseX and mouseY.

Another issue I faced and a partial learning curve was the arc function. I had difficulty with understanding how to utilize it in terms of generating the shape of the arc. As the function utilized the arguements pi, half pi and quarter pi, it was difficult to see at what part did the arc start and end. The arc function was mostly used for my mouth and eyebrows and my hair for a more curved feel.

A highlighted bit of code I’m proud of:

So as my birthday was approaching (14th of February and yes, I’m born on Valentine’s Day 😊), I thought to try my hand at adding a funky effect to sort of mark the occasion. I was aware of the mousePressed and random functions and decided to have it generate circles of random color and size, with them being randomly appear around the background. The reason why I’m proud of it was I wanted to see what a simple effect would do for my canvas.

if (mouseIsPressed){
  
  background(0)
  
  noStroke()
  fill(random(0, 255), random(0, 255), random(0, 255), 100)
  circle(random(width), random(height), random(10, 100))
  
}

Reflection:

I throroughly enjoyed creating my self portrait. Although at many points I had struggles with positioning the shapes around, I was able to sort of overcome it in my own manner. The main thing I struggled with was the arc function, as I was a bit confused at how to implement it with getting the arc correct.

I also did like the addition of the effect but I feel like I’d love to add more perhaps to my own self, such as giving myself a different expression. And maybe I could touch up the effect a little more, such as adding more texture. Perhaps even having a smooth effect would be a nice addition. But overall, as a start, this assignment was quite fun to do and I relished in creating my own portrait.