Concept:
My concept for this self-portrait was to represent my culture and background through p5.js. I wanted to express myself as well as the city I was born in, so I included the Burj Khalifa in the background as a distinguishing landmark. I represented myself through the traditional clothing called the Kandura, which is what I mostly wear on a daily basis, as well as the ghutra, which is wrapped around my head. My beard also played a big part in this self-portrait, as I believe it’s one of my most distinct features. I also wanted to experiment with animation, which I was inspired to do after seeing our previous class samples.
How this was made:
This self-portrait was made with p5.js, using a variety of features such as arcs, rectangles, ellipses, fills, and strokes. Arcs were used for the mustache, beard, mouth, and ghutra, while rectangles were used to build the Burj Khalifa and form the neck. Another interesting thing I found was the beginShape() function since I didn’t want the kandura locked into a fixed shape like a rectangle, I wanted to stretch it a bit to look more natural, and this came in handy for that.
The Burj Khalifa, on the other hand, was formed with simple rectangles at different points and sizes, which was a bit annoying to do, as I had to play around with different coordinates to get it the way I wanted. Another part where I felt a bit stuck was forming the ghutra, as I didn’t know how to shape it, so looking at previous students’ work really gave me the inspiration to visualize how I wanted it to look.
Another thing I wanted to make stand out were the eyes, especially adding the white dot next to the pupil to make them more lively and easier to look at.
A challenging part was implementing the animation for the self-portrait, as I was clueless on how to start it, but I was able to use if/else statements to make the blink and eyebrow expression happen in unison as you hover the mouse over the eyes. I looked at a few tutorials as well as AI to figure out the whole concept and apply it to my work.
Code I am Proud of:
function draw() {
// Burj Khalifa
fill(150, 180, 215);
noStroke();
rect(430, 340, 100, 260);
rect(441, 210, 78, 160);
rect(452, 105, 56, 110);
rect(463, 55, 34, 60);
rect(476, 25, 6, 30);
This snippet of code is the one I am most proud of, as it forms the Burj Khalifa, the finishing touch for my self-portrait. I kept thinking of different ideas for a background, but it had to be the Burj Khalifa. I was overcomplicating the code for it, as it wasn’t easy to grasp because its design is unique compared to other buildings. But then it hit me, it was much simpler than what I had made it out to be. After thinking about it for over an hour, the actual work was completed in just two minutes. I just had to add rectangles one over the other, reducing the size each time it ascends. Playing around with the coordinates was a bit annoying, but worth it in the end.
Reflection:
Working on this self-portrait taught me a lot about both p5.js and my own patience. Going in, I didn’t have much of the design experience, so just understanding how shapes like ellipses(), rect(), and arc() worked together to build a face felt overwhelming at first. Breaking the portrait down into small, separate pieces; the head, the eyes, the beard, the ghutra, made it much more manageable, since I could focus on getting one feature right before moving on to the next instead of trying to solve everything at once. The parts that meant the most to me were the ones tied to my culture: the kandura, the ghutra, and the Burj Khalifa. I wanted the portrait to say something about where I’m from, not just be a technical exercise, so getting those details right mattered more to me than getting the code perfect on the first try. The ghutra in particular took a few attempts to get looking right, and I leaned on classmates work and some trial and error to figure out how to shape it convincingly. Overall, this project pushed me to combine a personal, cultural concept with a completely new technical skill, and I’m happy with how both sides came together in the final piece.