Export generative art from Cables.gl
Highlight is a platform for creating and releasing NFTs, and offers a bunch of special self-serve tooling to support the creation of generative artworks on the blockchain.
Cables.gl is an intuitive way to build generative visual art. It provides a no-code GUI to compose various visual effects by stringing them together, along with random values as inputs.
This document describes the steps required to export a cables.gl patch and release it as a generative series on the Highlight platform. We’ll build a simple generative artwork that draws a number of rings corresponding to the order the token was minted in. The number of rings is limited to max 6.
Background
Highlight provides a small JavaScript snippet that can be imported into your generative code, called hl-gen.js. This script provides two important pieces of data:
A random seed, which is deterministic (always the same) for an individual token. We’ll feed this value to our cables.gl patch to create a visual output.
The hl.tx object, containing a variety of other information about the mint that can be used as inputs into your work (the mint order, the block timestamp, the minter’s wallet address, and more. Check out the README for more info).
Step 1: Prepare the patch
First we’ll prepare our cables.gl patch. The patch needs to accept two variables: highlightSeed
and highlightTx
.
highlightSeed
is of type number.
highlightTx
is of type object.
In the below example we extract the mintIteration value (corresponding to the order in which the token was minted) from the highlightTx variable and use it later to generate the appropriate number of rings.
From there we save the mintIteration
as the value numberOfRings
, which is then used together with the highlightSeed
to generate an array of random numbers (RandomNumbersArray op), used as seeds for the color of the rings (RandomNumbers op).
In each loop iteration we extract one value from the random numbers array, generate the color, then draw a ring whose size is proportional to the loopIteration
index.
When you’re building your own patches, you can experiment with using these random and dynamic values provided by hl-gen.js to feed into your visuals.
Step 2: Export the patch
When we’re happy with the results, we’ll export the patch using the cables.gl export UI. We’ll extract the zip file and navigate to the folder.
Step 3: Prepare for upload to Highlight
After we extract our zip file we need to do a couple of things.
First, add the hl-gen.js file to the js folder that is inside the exported cables folder. You can use the download button on this page: https://github.com/highlightxyz/generative-art.
After placing the file in the js folder, open the index.html file and import hl-gen.js above your patch.js file, like this:
After that, edit the index.html by adding the following code below the CABLES.patch = new CABLES.Patch(....
code already present:
It should look something like this:
You can also trigger the highlights capturePreview
function by adding it to the patchFinishedLoading
method like so:
And that is it! Now all that’s left to do is to zip the folder and upload it to Highlight. You can click through previews of your code on the Highlight platform to confirm that it’s working, and deploy to testnet to confirm again.
Step 4. Uploading to Highlight
Open your file explorer of choice and navigate to the project. Select all the files, right click and compress. Note that you should select all the files and compress them, not the parent folder. Then use the upload flows on the “Create” section of the Highlight website, selecting “generative series” as your starting point.
Links
Here is a link to the demo cables.gl patch - https://cables.gl/p/3olrVK
Last updated