P5.Js Exploration

Diving into creative Coding

TLDR; I built a generative art flow that is fully autonomous: generating art daily from creative code, and publishing to Instagram and WordPress without any humans. Cool, eh?

Creative coding — programming towards a visual pursuit, instead of functional, is a medium that I’ve wanted to personally explore for some time now. I love that it’s a mass of creativity, somewhere between design and programming, which is right up my alley. A key component of creative coding is the idea that the creator must relinquish a certain level of creative control. The resulting pieces are generated by combinations of variables, to help determine interesting art.

So with a couple of hours over last weekend, I set out to start learning the workings of p5.js and spin up a micro site to share the generative art on. For the site itself, I naturally wanted to use WordPress (with the upcoming Full Site Editing functionality) as another excuse to jump into real-world usage of the upcoming release.

Every day a script is triggered autonomously, which runs the p5.js creative code I’ve written, picks a random integer as a series ID/name, and saves the one-of-a-kind generative piece as a high-resolution file. The idea behind this was largely inspired by Andrei Korchagin.

That’s pretty cool — but I didn’t stop there. As part of the production workflow, the file is then sent to an Instagram account I created for this particular project. Then a post is programmatically published on the WordPress site that I’ve spun up, attaching the generated file as the post’s featured image. Now whenever you check out my new gallery site, tabor.gallery, you’ll see each generative piece as they’re created daily.

For the site, I used a variant of the upcoming Twenty Twenty-Two block theme, to build out the gallery. And although there are a number of Full Site Editing quirks to be ironed out yet, I can confidently say that a year ago this would have taken much longer to publish. 💪

%d bloggers like this: