As someone who has only ever coded in CS assignments involving complex and detailed task requirements, this particular assignment gave me freedom to explore all kinds of possibilities when it came to creating a self-portrait using shapes and lines through code. I was initially confused on how to add details using only shapes but as I experimented with different sketches, it started to make more sense.
Process
I had drawn a line art sketch to get an idea of the different shapes I will have to use and drew them on a grid so that it’s easier for me to translate that into code.
I used a circle and bezier curve to create the face shape and the use of control points for the curve proved to be the biggest learning point for me in this assignment. I used the bezier curve in almost every element, from face shape to eyebrows and shadows, and it was interesting when tweaking the control points along the x or y axis would create the effect I wanted.
I also learnt how to use the translate() and rotate() functions, which were initially tricky to understand. I used them to locate the blush ellipses because I wanted them at an angle. It took me some time to realize that using these two functions causes all the elements after them to be relocated and so I tried to use them at the very end of the code.
As for the background, I wanted some sort of movement in the portrait so I created clouds and incremented(or decreased for the second one) their x coordinates to depict movement from one end to another.
Reflection
I really enjoyed working on this assignment and I think I was able to grasp the basics of p5.js . However, I do believe there is a lot left to experiment with and I would like to do so in the upcoming assignments. I think I could have done better in this assignment by adding more interactivity through either clicking on the canvas or with the cursor hovering on it. I would love to try similar things and introduce more interactivity in my next assignments.