Concept
I’ve been learning German on Duolingo for the past few months, and I was inspired by simple yet expressive way in which the characters are drawn. I thought it would be possible to emulate that style with basic shapes in p5.js. I also really love sunsets, so I wanted to make the background a sunset gradient.
Highlight
A section of code I’m particularly proud of is the two arcs that form the shading for the neck. I placed this section of code before the section for the ellipse that makes the head, so I was able to fill them both in with a lower opacity, creating the shading effect defining the chin. When trying to get this shading to work, I realized that identifying the specific tasks you want the code to do (being less opaque, being able to define arcs in degrees) is integral to the process, because then you can look up commands online that complete those tasks and implement them into your code.
//shading fill(191, 172, 134, 130); noStroke(); angleMode(DEGREES); arc(200, 285, 46, 40, 0, 180); arc(200, 285, 46, 20, 0, 180);
Embedded sketch
Reflection and ideas for future work or improvements
In the future I would organize my code better by making each part of the drawing, such as the face, a separate function, and then call that function to draw that part. This way, it will be easier to see everything at a glance and also troubleshoot. As you can see in the sketch above, there is a glitch creating an errant line on the right ear and a notch on the left ear – if I organized my code by section it would be easier to isolate bugs like this. I would also like to try animating parts of the drawing, like making the eyes move from side to side.
Resources used
https://vimeo.com/619224012
https://www.youtube.com/watch?v=EAY7S1tWbzc&t=9s
https://p5js.org/reference/