When I saw the examples in class, I knew I wanted my self-portrait to have an element of fun. A touch of movement to make it more interesting. So after brainstorming I decided to add a small cute wink in it. I didn’t have any answers to how to do it or when it would happen, but I knew starting was the best way to develop the idea.
I started by building the background. I chose a beach scene because it’s bright, fun, and resonates with my personality. Using just four rectangles, I created the sand, sky, and beach.
Next, I focused on the structure of my portrait. I used an ellipse for the face, and for the neck, I initially tried combining a circle and rectangle. After exploring the documentation, I realised a rounded rectangle could give the same effect with fewer shapes, so I went with that.
Then, the sweater collar was created using two triangles, traced easily with the print(mouseX, mouseY) trick taught in class. The body was a simple rounded rectangle to echo the shape of the shoulders. Once the structure was in place, I added details such as the nose, eyes, and sweater textures.
Finally, I added the wink. I wanted the portrait to respond to time or interaction. I decided that whenever the cursor moves to the right side of the canvas, the portrait would wink. Hence, I set the if condition that when position of mouseX is greater than 300 (middle of canvas) then draw a different shape. If condition made this simple because the eye now has two states: open or closed.
if (mouseX > 300) {
stroke('black');
strokeWeight(2);
line(315, 190, 325, 190); // closed eye line
} else {
circle(320, 190, 10); // open eye
}
The hardest part of this portrait was the hair. I initially considered straight hair, but that looked too robotic. After several iterations, I decided on curly hair with circles on the ends to give a flowing effect. By leaving one side slightly incomplete, it adds the sense of wind moving through my hair.
In the future, I’d like to make the portrait even more dynamic: perhaps animated clouds or waves in the background, and more detailed facial features. I also hard-coded most values, so I want to explore making my code more dynamic and flexible, so changes in one area automatically adjust related elements.