Close

April 6, 2020

30 days of p5.js

In an effort to turn the current crisis into something positive and creative, I gave myself a 30-day challenge: this April, I will complete a p5.js course to become more familiar with the library.

p5.js is a JavaScript library, it is “an interpretation of Processing for today’s web.” Processing is the open-source graphical library initiated in 2001 that enables us to draw shapes, patterns, or more generative type of art based on maths/algorithms, etc. and more.

The particular class that I’m taking is called The Nature of Code by Daniel Shiffman. Shiffman has a new YouTube playlist (2020) covering this material for free. The book is also available in full online.

In this course, Shiffman introduces ways to simulate natural phenomenon in p5.js: laws of nature such as gravitational attraction, Newton Laws of Motion, friction and drag force, etc.

Creating worlds in p5.js

What is very enjoyable from the get go is the idea that we can take these famous laws and make them work for the “worlds” we decide to create. We can decide that in a given sketch (Processing/p5.js project file) gravity is applied from left to right and see how our objects respond to it. We can play with the density/viscosity of fluids that we make up and drop things in it.

It is truly refreshing to see these familiar laws in a different light: Sure, calculating the gravitational force between two masses is fun, but tweaking it in real time or making it react to a mousePressed state is really really fun.

I’m 40% into the lesson, and 6 days into my 30-challenge and I’m enjoying it immensely. Shiffman’s class is a fantastic toolbox to help us generate code that copies nature.

I can’t wait to work on flocks of particles, fractals, and other cool things. I will post some sketches/GIFs here.

Some inspiration

Here are some creative coding artists that blow my mind.

I have to start with Zach Lieberman. I will probably write about him at some point so for now I’ll drop a few pieces:

View this post on Instagram

Type growth #openframeworks

A post shared by zach lieberman (@zach.lieberman) on

View this post on Instagram

Hand curve test #openframeworks

A post shared by zach lieberman (@zach.lieberman) on

View this post on Instagram

Curve chase #openframeworks

A post shared by zach lieberman (@zach.lieberman) on

I’ll stop here but I could go on forever. If you follow him on Instagram, going through is feed is going through his creative process. One can see, from post to post, how ideas morph into other ideas, how one aspect of a piece is stretched out in another, or how the opposite of one variable is explored. Amazing stuff.

Then in no particular order: