On Learning p5.js

I started learning p5.js a few months ago mostly out of curiosity. Well…curiosity and a need to find something I was good at. I had been doing web development before then, or rather, I had been forcing myself to do web development — I just couldn’t get into it. I stumbled onto p5.js by pure chance and was fascinated by this intersection of art and code, and honestly, it’s been a blast.

For those who aren’t familiar with p5.js, it’s an open-source JavaScript library used for creative coding.

It was created by Lauren Lee McCarthy in 2013, and like all things JS, it is web-based.

I’ve made several small sketches over the course of my learning; these are some of my favourites.

But let’s start from the beginning.

When you start to learn something new, there’s always a lot of confusion. Where do I start? Am I going in the right direction?… I watched a bunch of YouTube videos and read a bunch of articles, but ultimately, what got me properly started was the YouTube channel Patt Vira and specifically this playlist. I found it extremely helpful, informative and actually enjoyable. Determined not to get trapped in tutorial jail, I decided to just start working on sketches of my own.

But I ran into an issue. I did not know what exactly to make; I simply could not figure out what kind of sketches I should even be trying to make. So I reached out to Patt through Instagram, explaining the issue I had run into. She scheduled a Zoom meeting so we could talk, and during that Zoom meeting, she said something really interesting: “Just follow your interests”.

What were my interests? What kind of images do I gravitate towards? I like visually striking things, I like images that look cinematic. Was that enough to get started? I had just read Steal Like an Artist by Austin Kleon, so rather than coming up with a sketch completely on my own I decided to search for something made using code that had those two things, and eventually I found a sketch called “To Grow” by Joe DeNavas on OpenProcessing, it looked so cool, and so I decided to make something similar.

To Grow by Joe DeNavas

And from there, I started coming up with different ideas, some good and some bad.

I even tried using p5.js’s oscillator to make musical compositions. Yeah, you can do sound synthesis with p5.js, crazy!

After making a few more sketches, I got back to Patt, you know, to confirm that I was in fact still on the right track, and we talked about how I was approaching the whole thing. The conversation gave me the necessary motivation to keep going.

After a while, I got pretty good at using p5.js to bring the ideas I had in my head to life. Here are a few more sketches I made ;

Because a lot of these sketches were animations, I decided to make a Vimeo account and upload some of my sketches there; the code for each one is in its respective video as well.

The truth is this: thinking of new sketch ideas was frustrating at times, mostly because I needed to get over the fallacy that the ideas were going to pop up in my head already fully formed; they almost never do.

The final image you see isn’t exactly what I actually intended at first, and in some the final image bore no resemblance to what I started with. I needed to embrace experimentation, and I needed to be comfortable with not always knowing where I was going. I needed to fully give in to the process, accessing my inner child. I just kept on asking myself, “What if I did this, what if I did that?”. It’s actually so freeing knowing I didn’t always have to have a perfect idea in my head before starting, I could just start.