Assignment 1: Portrait of Myself

This is my self-portrait, depicting me with some items of interest: two flags representing my ethnicity and nationality; gears depicting my love for engineering; and Yugioh cards showing my love for the game.

📋Assignment Brief

  • Make a self-portrait using p5.js using the online editor
  • The portrait must be entirely created using code
  • The portrait may be stylised and should be inspired by one’s character

💭Conceptualisation

I started the project by sketching elements that I identified with, things that resonated with who I am. I chose to highlight my flags, Yugioh cards, a paintbrush, and even a rough sketch of myself. I chose to use a very stylised, art style in order to play into the strengths of the software, hoping to recreate an almost vector-art look.

I then thought about features to implement. Despite not being taught any interactive elements just yet, I wanted to make my piece do something special. Hence, I made the eyes follow the user’s mouse. I achieved this through a combination of researching other people’s projects, YouTube, and Chat GPT.

💻Process

I worked on this project in chunks- isolating each component into an element that would need to be individually coded,  and then planning what tools I would need to use for it. I really enjoyed this as it taught me the thought process and planning needed for a piece like this- something completely new to me.

As I used many repeated elements, I was able to focus on creating a singular good piece and then just translate the element into the other areas it’s needed.

I felt particularly proud that I was able to code the moving eyes: I had to research how different features worked, create and effectively use variables, and had to think through logic to ensure it moved the eyes correctly. This was all iterative, I had to stop and re-try many times but was able to manage in the end.

//Eyes
 fill(256); //Set the fill colour to white
   rect(285, 375, 45, 50, 17);
   rect(370, 375, 45, 50, 17);
   rect(285, 400, 45, 25, 3);
   rect(370, 400, 45, 25, 3);
 noFill(); // Disable the fill colour

 
 // Eye variables
 let leftEyeX = 310; // Left eye X position
 let rightEyeX = 395; // Right eye X position
 let eyeY = 400; // Both eyes Y position
 let eyeSize = 40; // Size of outer eye circles
 let pupilSize = 25; // Size of pupils

 // Calculate pupil positions for both eyes
 for (let eyeX of [leftEyeX, rightEyeX]) 
 {
   let dx = mouseX - eyeX;
   let dy = mouseY - eyeY;
   let angle = atan2(dy, dx);

   // Limit pupil movement
   let maxDistance = (eyeSize - pupilSize) / 4;
   let distance = min(dist(eyeX, eyeY, mouseX, mouseY), maxDistance);

   // Calculate and draw each pupil
   let pupilX = eyeX + cos(angle) * distance;
   let pupilY = eyeY + sin(angle) * distance;

   fill(56, 16, 28); //Set the fill colour to brown
     circle(pupilX, pupilY, pupilSize);
   noFill(); // Disable the fill colour
 }

🚩Challenges

Creating the moving eyes were a tad difficult because this uses a lot of knowledge that we have not yet learned in class. However, I was able to look at past projects and use the internet to self-teach how it works. The Pakistani flag was rather tedious, too, as I had to research how to make a star shape and use another new feature. Additionally, the new coordinate system was rather strange. I had to adjust to using the downwards is positive mindset, but it became easy after I introduced a temporary mouse tracker- using the software’s mouseX and mouseY features.

📶Potential Improvements

To improve, I would use more variables so that my portrait may be scaled to whatever size the canvas is. This would allow the portrait to keep a high resolution despite being scaled up or down. Additionally, I could introduce a clicking feature, something where an element on the screen would change every time I click it. This introduces a sense of whimsy and fun that I identify with.

</>Source Code

GitHub Link: https://github.com/theSumeed/Self-Portrait

 

 

Leave a Reply