Category: S2026 – Mang

Assignment 1: Self Portrait

“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.

Week 1 – Self-portrait

Concept

When I think about portraits, I believe personal characteristics should always be included to reveal who the person really is. When it comes to me, my favorite hobby— sports —immediately came to mind. Now I play for the NYUAD Volleyball team and I really love being there and doing my best at practice.

When I study, I usually feel sleepy and I don’t enjoy doing boring homework, but I always have energy for volleyball. So, I decided to make an interactive self-portrait that reflects this contrast. In the sketch, an item (either a book or a ball) is tied to the mouse’s position. When the user double-clicks, my facial expression, clothes, the item itself, and the background all change.

Highlight Code

One part of the code that I particulary liked is integration of double-click:

function doubleClicked() {
  if (thing.chosen_type == 'book' && bg.type == 'library' && character.type == 'sad') {

    thing.chosen_type  = 'ball';
    bg.type = 'volleyball';
    character.type = 'happy';
  } else {
    thing.chosen_type = 'book';
    bg.type = 'library';
    character.type = 'sad';
  }
}

Since I have some prior coding experience, I used OOP principles to make the object move with the mouse and change states with a double-click. Even though the code itself is quite simple and straightforward, these interactive elements make a big difference to the overall picture. In this code snippet, double-click changes the attributes of the background, character, and item. It changes their type to another one, so in the next frame they will change and the code will display the picture with changed characteristics.

While creating the self-portrait, I relied on the p5.js reference page and Googled RGB codes for specific colors. I also had to look up the syntax for class and function creation, since I know how to do this in Python, but not JavaScript.

I used simple shapes in my portrait, but the most difficult ones were the arcs. It was hard to find the exact angles to make the arcs look the way I wanted while maintaining the right shape. I had to experiment with different angle values and ellipse diameters to create bangs that looked correct. I also spent time figuring out the angles for the main hair so it would look like a short haircut and not just a squished circle.

Reflection

Reflecting on my work, I definitely want to improve the overall design. I want to add more specific details so the portrait becomes less simplistic. In terms of interaction, I think adding more complex animations, such as the eyes tracking the movement of the ball or book as they moce with a mouse, would be great. Finally, making it a 3D version where the character is a detailed 3D model with depth, shades and textures, and the object actually rotates in 3D space would be awesome.