p5.js First Sketch

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

← Previous post

Next post →


  1. I actually wanted to write a brief comment so as to thank you for those fabulous solutions you are giving out at this website. My extensive internet research has at the end of the day been paid with awesome facts to share with my neighbours. I ‘d repeat that we site visitors are undeniably fortunate to be in a fantastic community with many awesome individuals with insightful strategies. I feel extremely grateful to have discovered the web pages and look forward to plenty of more exciting times reading here. Thanks once more for all the details.

  2. very good submit, i certainly love this website, carry on it

  3. I want to show some thanks to this writer for bailing me out of this particular trouble. As a result of exploring throughout the online world and coming across basics which were not pleasant, I assumed my entire life was over. Existing without the strategies to the difficulties you’ve resolved as a result of your good short post is a critical case, as well as those that could have in a wrong way damaged my entire career if I hadn’t come across your website. Your primary mastery and kindness in dealing with every part was helpful. I am not sure what I would’ve done if I had not come upon such a solution like this. I am able to at this time look forward to my future. Thanks so much for your skilled and results-oriented guide. I won’t hesitate to refer your web sites to any person who needs and wants care about this problem.

Leave a Reply