To begin with, the self-portrait overall style was inspired by the 2D user profile avatars that are commonly used in interface design.
I took the idea of the circle background and a darker color theme on half of the circle to make the effect of light and shadow, therefore, creating depth in a 2D flat design.
After deciding on the overall theme, I mainly used a combination of ellipses and arcs to create the features of my face.
Here are the references for the functions I used:
Ellipses: https://p5js.org/reference/#/p5/ellipse
At first, I tried to locate the coordination by calculating, but at the portrait got more complex, It got harder to place the new shapes on the desired position especially on arcs. Then I used another function to print out the coordination of the mouse, therefore, whenever I need to add a new shape, I only need to place the mouse and enter the printed out coordination.
Here’s the link to my code:
