Concept
For this project, I created a self-portrait using p5.js that represented some of my main physical features. Since this was my first time creating a portrait completely through code, I decided to keep the design relatively simple and use basic shapes to build up the different parts of my face. I focused on features that make the portrait recognizable as me, such as my brown hair, glasses, eyelashes, eyebrows, and the pink color of my clothes and lips, i also added glasses to draw the part of me that I don’t usually show to others (I wear contacts). I also chose a bright cyan background because its one of my favorite colors. What I found interesting about this project was having to think about my face differently. Instead of drawing normally, I had to break each feature down into shapes and coordinates with colors.
How this was made
I made this self-portrait using p5.js and JavaScript. I started by creating a 500 × 500 canvas and then built the portrait step by step using basic shapes such as ellipses, rectangles, triangles, and lines. I mainly worked by changing the coordinates, sizes, stroke weights, and colors of each shape until they were positioned correctly and looked like the features I wanted to include. For learning how to work with colors in p5.js, I used The Coding Train’s YouTube videos as a reference. I also used Google to look up specific color values, especially for the brown tones in my hair and eyes and the colors that were closest to my skin tone.
While working on the code, I ran into an issue where changing the strokeWeight() for my eyelashes was also making all of the other lines in the portrait bold. I wasn’t sure why this was happening, so I used AI to troubleshoot the problem and understand how the stroke settings were affecting the rest of the code. This helped me realize that strokeWeight() continues to apply to the shapes and lines that come after it unless it is changed again. I then adjusted where I placed the stroke weight so that the thicker lines were only used for the eyelashes and glasses.
Code I’m proud of
//glasses noFill() stroke(0) strokeWeight(4); line(237, 233, 263, 233); ellipse(300, 233, 75, 75); ellipse(200, 233, 75, 75); line(163, 233, 133, 225); line(337, 233, 367, 225);
One part of my code that I am particularly proud of is the code I used to create my glasses. Although the code itself is quite simple, I found making the glasses symmetrical and positioning them correctly on my face surprisingly difficult. I had to think a lot more about the math and coordinates than I expected, which was challenging for me because math is not something I am very good at. Since everything is based on coordinates, I had to think about how far each part should be from the center of the canvas and from each other. I spent a lot of time changing the numbers and checking how the glasses looked until I finally got them to line up properly.
Reflection
I really enjoyed making this project, especially because it was my first time using p5.js and actually creating a drawing through code. At first, I found it a little confusing having to use coordinates and numbers for basically everything, especially because I am not very good at math. However, the more I changed the numbers and saw how they affected the portrait, the more I understood how everything worked. For my next project, I would like to make something more interactive instead of just having a static image. I think it would be really interesting to have something on the screen change when the user clicks or moves their mouse especially since I’ve mostly understood the basics now.