p5.js assignment#1 was an entirely jarring, anxiety-inducing experience. I severely struggled with understanding javascript code and hence this assignment felt like the biggest milestone. Whilst I still feel that to some extent I don’t entirely understand p5.js coding, I tried to adapt the best I could, within limited time constraints, by using a mixture of simple shapes and what I consider some high level codes to conjure a self-portrait.
I had the hardest time with determining the correct coordinates and so there were lots of trial and error in placing shapes and curves, specifically with the bezier() function. The double eyelids were the hardest to recreate and therefore took considerable time perfecting them. Once I had established a desirable curve I used the translate() function to transfer it to my right eye. Any features that required the bezier()/ beziervertex() function I was proud of:
//lips fill(255,144,137); beginShape(); vertex(380, 465); bezierVertex(380, 465, 390, 450, 400, 465); bezierVertex(400, 465, 410, 450, 420, 465); bezierVertex(420, 465, 400, 490, 380, 465); endShape();
//eyelids noFill(); bezier(382, 393, 365, 375, 338, 385, 332, 393); push(); translate(85, 0); bezier(385, 393, 365, 375, 338, 385, 332, 393); pop();
Through the fill()/ nostroke()/ translate() functions, I was able to discover and utilise the push() and pop() functions, which corrected many placement/ color errors that tended to occur. To compensate the lack of an interactive quality, I put substantial care into the aesthetics of the self-portrait. If I had a little more time, I would have loved to dabble in javascript coding for adding loops. Making the clouds move repeatedly would certainly make this assignment a more dynamic piece.