Creating a Living Generative Art NFT Project With JavaScript, Google Cloud, Instagram, and OpenSea
--
Intro / Context
I’ve been interested in code and technology most of my life. And I’ve been interested in art and design for much of it too. I was aware of there being an interplay between them (algorithmic art, creative coding, etc.) but had never really dabbled much in it.
As NFTs came around, generative art seemed to come much more into the spotlight, and I began to see a lot more of it. From an NFT context, you have what are called “pfp” (or profile pic) collections, think Bored Ape Yacht Club or Cool Cats, and you have generative art that is more… museum-grade (for lack of a better term).
Profile Pic Collection Generative Art
The way that those pfp collections are generated are that you have a set of attributes (e.g., hats, glasses, background color, “fur” color, etc.) that each have a series of possibilities (e.g., 3D glasses + rainbow fur + other attributes). These (typically) get decided randomly at the time of mint, so some owners end up with “rarer” (and more valuable) tokens, or at least ones that look more interesting. In such mints, you are basically guaranteed to have a unique piece. They are called pfp collections because many people use them as their profile pictures on Discord or Twitter, so your online identity is essentially generated by a randomness function at the time of mint.
Since a finite amount is ever minted (usually 10,000, but sometimes lower), examples from some of these collections end up commanding impressive prices and even being sold at Christie’s!
“Museum-Grade” Generative Art
The other kind of generative NFT art looks more like this:
I love both the pfp and “museum-grade” kinds, but this note is geared towards the latter. Reading about how Tyler Hobbs created Fidenza is fascinating. An entire platform called Art Blocks has sprung up around generative art, and some of the examples there are beautiful.
My curiosity got the best of me and I started looking into how to make some myself. I have experience with JavaScript and Python, and there are myriad generative art libraries for both, but I ended up choosing one called p5.js (for JavaScript, of course), which is an offshoot of Python’s classic Processing library.
It was actually quite simple to use p5.js, although I was only scratching the surface. I decided to go for colorful, simple, minimalism, evocative of the modern art movement — which used very simple color and shapes to great effect. I chose a grid of circles because of the way they can connect as different pieces are side-by-side (like in the Instagram feed), meaning that each iteration is just a sliver of a larger, never-to-be-complete canvas. I’m also a believer of the story behind a piece, and this note goes into the story behind the pieces of Regenerative Generation.
Process
The overarching theme of the project is “what if I took the human element out of the process of creating and posting the art pieces”. Of course, this isn’t art created purely by a computer, since I have set up the parameters in advance. However, it is something that, once started, will run like a perpetual motion machine until the project concludes, pivots, or is taken down for maintenance.
Seeing as I had only started dabbling in generative art, making something on the more minimal side made sense. I had ideated the framework for the pieces that Regenerative Generation will be composed of the following elements / steps:
- A simple 4x4 grid of filled-in circles.
- The circles will be cut off at the corners and sides of the image, this is so that when posted in an Instagram feed, they connect create a sort of “continuous canvas”.
- The background as well as the color of each circle will be randomly chosen based on the HSB (also known as HSV) color model, with three random values from 0 to 255.
- This creates 256^(17 * 3), or 256⁴⁹ possibilities, which means each piece is virtually unique.
- The script will run daily on a cloud server, generate that day’s piece of art, and automatically upload it to Instagram via API. The piece is also uploaded to Twitter.
- I take the most-engaged (on Instagram) piece of the previous week, and upload it to OpenSea as an NFT, which can then be minted by any buyers on the Ethereum blockchain, where they will thereafter live forever.
One part of the autonomous uploading process that will be interesting to observe is how this regular cadence affects engagement and follower increase. They say that consistently uploading content is the key to organic growth on social media, and how can I be more consistent than a cron job?
Technical Background
The high-level stack involved is:
- Node.js — for actually running the code server-side
- A Node port of p5.js — the generative art library used
- Google Cloud (Compute Engine, Storage, Logging) — for hosting the code and having an always-on VM that will run this for me on a daily basis
- Instagram API — so I can automatically post the pieces and comment the hashtags
- GitHub — for version control
Not to mention myriad npm packages, config files, and so on. I’m using Node because while I got p5.js to run in my browser, the server environment doesn’t have a display. Instead of “mocking” one, which seemed inelegant, I found that there is a Node port of p5.js that met all my needs. The code transitioned very cleanly, and here is the relevant part (logging and other function calls omitted) that generates the circles:
Fairly simple! And here is an example of what this creates:
The naming convention is that I call each piece “Series [some random number under 100,000]”, which is generated at runtime. This has a fairly low chance of colliding on names, but still creates a low enough number that you can remember it. Maybe lower numbers (or higher ones?) will be more valuable some day too.
The colors have effectively a zero chance of colliding, since it is 256⁴⁹ possibilities. However, interesting things can result — we can have some circles that blend into the background, some that are more “pleasing” than others (I think the above example is on the pleasing side, but you can also have, for instance, brown backgrounds that probably aren’t as nice).
Most of the setup work was fixed costs of spinning up the Google Cloud services (and learning about them). I used the cheapest Compute Engine instance type and a small Storage bucket. There was a decent amount of permissions to figure out, but I’m somewhat familiar with Linux systems so it wasn’t too much of a hiccup. If I were to do this project again, it would take a fraction of the time since the fixed costs were already figured out. This use case is also not very expensive from a computational and storage perspective, so Google Cloud has an excellent free tier that I am using.
The order of events that happens in the code is:
- The piece is generated using p5.js.
- That piece is saved to the local filesystem as a jpg.
- That saved file is uploaded to a public Google Cloud Storage bucket.
- It calls the Instagram API with the public URL to the piece’s saved file.
- The Instagram API creates a “media container” and returns its ID.
- It calls the Instagram API again to publish said container using its ID, now we have the post’s ID returned.
- It calls the Instagram API once more to comment hashtags on the post that was just created (I think this looks cleaner).
The code is all open-sourced on GitHub. Feel free to reach out if there are any questions or if I can make it more self-explanatory. I also used Squarespace for a simple project website.
Unfortunately, OpenSea does not have a way to lazy mint pieces via API at this time, from what I can tell. For background of why that is important, the typical NFT minting process involves paying gas fees. These fees pay the miners whose computational power processes the blocks that confirm any transaction on the blockchain, since Ethereum is a Proof-of-Work blockchain at this time (Ethereum 2.0 will be Proof-of-Stake). In practice, Ethereum being on Proof-of-Work means that gas fees can be quite high, from ~$40 USD to hundreds of dollars USD. It is impractical to automatically mint for such costs (and with the costs being so variable). A feature that OpenSea provides is lazy minting, where you are able to upload pieces to OpenSea, and the buyer pays for the minting fee on top of the price of the piece. This means the gas fee is not front-loaded onto the artist.
As this feature is not yet available automatically via API, I’ll be manually checking engagement metrics and uploading the most-engaged pieces on a weekly basis.
Future Plans / Roadmap
I’ve kicked off the project to run automatically starting on September 19th, 2021. You can follow it in a number of places:
One piece of automation that is missing is the lazy minting on OpenSea via API that I described above — once that is enabled, I will be able to have the entire end-to-end process run continuously without any human intervention.
Of course, I’ll still be responsible for replies and engagement on the social accounts, that part is impersonal to automate.
There are some under-the-hood aspects that I am considering migrating, for instance I don’t need an entire Linux instance to run this. I can use Google Cloud’s App Engine, which has more elegant cron job scheduling, alerting, logging, etc., and is probably a better choice for this use case.
I’m also looking to get ever more familiar with p5.js and other generative art libraries (such as processing.py), and begin to make more varied and complex pieces. Regenerative Generation may pivot towards that, in the same way that a piece of software evolves over time and over different versions.
This is just version 0.
Conclusion
Overall, this is an experiment. As mentioned earlier, the theme of the project is taking the human element out of the creative and posting process, and creating a sort of “living art project” that will tick away without any human intervention (unless I need to restart a server or re-authenticate an API key).
I’m interested to see if the story garners engagement and encourages dialogue. I’m interested to see if the pieces themselves speak to anyone and if there is any demand for them as NFTs. I’m also interested to see where this project goes and how it evolves as my knowledge of generative art and NFTs evolves with it.
Update 10/7/21: Read Part 2 of the story and process!
Any questions — feel free to reach out! And visit the links below:
