Releasing generative art on Highlight with 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:

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

2. 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:

// Required for seeding cables.gl random functions
 CABLES.patch.setVariable('highlightSeed', hl.random());
 // Access to all hl.tx variables
 CABLES.patch.setVariable('highlightTx', hl.tx);

 hl.token.setTraits({
      madeWith: 'cables.gl <3 highlight',
 });
  hl.token.setName(`Example token #${hl.tx.tokenId} made with cables.gl`);
  hl.token.setDescription(
          `This is an token generated as part of an example project for using 
          hl-gen.js and cables.gl. The timestamp of the mint was ${hl.tx.timestamp}. 
          The minting wallet address was ${hl.tx.walletAddress}`);

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