I have been working as a sort of novice web front-end programmer recently. I am so fascinated with what those coding things can build. Especially for me, JavaScript takes the cake. Although I am not familiar with p5.js library, I totally enjoyed dabbling with it.

I have found IDEABOT on my desk right after started to conceive what I will draw. It is one of my desk toys which gives me weird, but fun, ideas sometimes.

Look the thinking posture.


In advance of writing some codes, I needed a schematic or a design sketch that could present the relative size and tipping points of each drawing components more clearly. From this sketch, I intuitively visualized final drawing, and I could even make a quick plan how I write codes for this.

I set up canvas size by 600(width) 850(height), and measured approximate coordinates of each component’s start points. I bet this kind of pre-planned to-do list enhances the efficiency of the whole process, apparently.

This is my p5.js drawing code snippet below.

I have tried to draw some curves and bezier lines through this codes. However, I couldn’t figure out how to control those control points of the shape precisely, and I was a bit confused to use rotate() also. Furthermore, redundancy and iteration of my code were very annoying. Probably this problem could be solved by using loop statement.

p5.js editable link