For my first Intro to Interactive Media assignment, I created a simple self-portrait using p5.js and basic geometric 2D shapes. My goal was to capture a few key things about myself: my long brown hair, pale skin, brown eyes, and my favorite color. I chose soft colors and a minimal one-color background so the focus stays on the face and shoulders, which feel the most “me.” One of my favorite parts of the code is how I drew the shoulders and upper body using an arc() instead of a rectangle. The code looks like this:
// shoulders/body
fill("pink");
arc(300, 600, 400, 260, PI, 0);
At first I was not sure how to draw the upper body in a way that looked rounded and soft instead of like a flat block. While exploring “The Coding Train” Youtube tutorial’s reference for shapes, I found the arc() function and realized I could use it as a big curved shape at the bottom of the screen to suggest shoulders. The last two numbers in arc() are angles in radians: I used PI as the start angle and 0 as the end angle to draw a half-circle shape for the shoulders. As i learned, in p5.js, PI is a built-in constant that represents the mathematical value of π (about 3.14159), which is the ratio of a circle’s circumference to its diameter. By using PI and 0, the arc draws from the left side of the circle to the right side, creating a smooth curved top edge that looks like a rounded shoulder line. I like this part because it looks nicer than a rectangle, also because I filled it with pink, which is my favorite color, so this area feels very personal and represents my personality as a light color lover.
Embedded Portrait:
I built the self-portrait with shapes 2D drawing functions in p5.js such as ellipse(), rect(), line(), arc(). The face and eyes are made from ellipses, the body and neck use rectangles and the pink arc for the shoulders, and the hair is constructed from overlapping rectangles and ellipses to suggest long brown hair. I also adjusted the fill () colors for the skin tone, hair, and clothing, somewhere I used colors just typing them, other ones such as the shoulders, skin and hair I tested different RGB values until the skin looked pale, the hair read as brown, and the pink for the shoulders matched the color I had in mind.
For learning how to code the portrait, I mainly used the official p5.js tutorials and followed Youtube tutorials from “The Coding Train” channel to get more comfortable with the general structure of a p5.js sketch. This assignment helped me get more comfortable with thinking in coordinates and breaking down a portrait into geometric shapes. Discovering that I could use arc() and the PI constant to create a curved shoulder shape was a small but important moment, because it made me realize how much control I have over shapes. In the future, I would like to add small details like accessories or texture in the hair using more line () and ellipse() shapes, experiment with simple interactivity, changing background colors or facial expressions when the mouse is pressed. Overall, the portrait is still quite minimal, but I feel it already captures some of my identity through the color choices and the simplified representation of my face and shoulders.