Creative Coding with p5.js

Creative coding or generative art is a relatively new medium to express abstract ideas as well as visualise concrete data. One of the easiest ways to get into creating coding is made possible by p5.js, a free and open-source JavaScript library created by Lauren Lee McCarthy and developed by a community of collaborators.

I've just started to scratch the surface with p5 and as my first project, I decided to visualise the endless wonders of π.

As the first visualisation I took the first 100 digits of pi (including 3) and assigned them to 100 circles—The bigger the digit, the bigger the diameter of the circle. The first ten digits of pi for reference are: 3.1415926535. As you can see, the second and fourth circles that are the same size represent the digit 1.

Check out the code and run it by yourself in the p5.js web editor.

In this one, I tried to replicate sound waves. The idea remains the same: the bigger the digit, the longer the line gets. For the sake of accuracy, every time 0 appears in this visualisation it is represented with a dot.

The last one is a bit more abstract and not as accurate but still fun to do. From left to right (0° to 180°) each digit of the first 100 digits of pi is drawn and as before, the size of the line is relative to the value of the digit.

But these are just sill frames that I captured from the p5 web editor. One fantastic feature of this library is the ability to make animations right inside the editor. All of these pi variations could be easily turned into animations. I will be updating this page with more sketches and hopefully motion graphics in the future.