Building a Generative Art Gallery with P5.js

·

3 min read

TLDR; I built a generative art creation flow that is fully autonomous: generating art daily from creative code, and publishing to Instagram and WordPress without any human input.

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.

How it works

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. 💪

What’s next

The first generative gallery I’m launching is called Project Anemone — as the art looks a bit like abstract snapshots of sea anemone. I’m looking forward to stopping in on the site every once in a while and discovering what pieces are generated.

And if there’s interest I’ll consider minting some of the popular pieces, based on engagement on Instagram.

This was a fun micro medium to lean in. I’ll definitely continue exploring generative art, coming up with other projects to put on the site. Enjoy!