Generative flow
Learn about launching generative art on Highlight
The Generative flow gives you all kinds of powerful utilities that makes the most difficult aspects of launching generative artworks easy, including things like capturing preview thumbnails and artwork metadata on-the-fly after a collector mints.
Drop a generative collection
Any kind of code-based artwork will work with Highlight, as long as you include the hl-gen.js script and an index.html page. The hl-gen.js script is responsible for communicating with the rest of the Highlight system to randomly assign traits and artwork inputs (frequently called a "seed"), making sure everything works as expected when a user mints.
Integrating hl-gen.js
To integrate hl-gen.js, you can download it from Github here. In your index.html file, reference the hl-gen.js script before any of your drawing code:
Including this script in your code will give you access to range of functionality, including random, deterministic number generators that you can use to seed artwork renderings and ensure that it appears the same across subsequent views for the same mint. To learn about the randomness function options, refer to the Github repo.
Beyond that, hl-gen.js also gives you access to blockchain values, including things like the transaction hash, transaction timestamp, minting wallet address, token ID, and more. This allows you to use these values in your code-based works as well. To learn more about which blockchain values are available in hl-gen.js, see our Github repo.
Finally, hl-gen.js lets you trigger image captures in your artwork. This allows you to programmatically set the preview image capture timing until after your code is rendered. Note that this aspect is optional, and can also be configured in the setup flow to be triggered after the lapse of a specific amount of time. See the Github repo for more information on capturing previews.
Zip your files and upload
Once you're ready and hl-gen.js is integrated into your script, you can zip your files and upload them. A simple example of your files might look is like this:
In the Generative flow, you can download the example project to see the ideal way to organize your files in a real project:
Test and preview your artwork
The "Test script" tab in the Generative flow lets you preview you artwork with randomized data points (served up by hl-gen.js). Pres the "Randomize all" button to preview different iterations of your work. You can even open Highlight Studio for more fine-grained tooling.
Preview image capturing
An important component of generative artwork is capturing still images of the final artworks, to be used as preview images across marketplaces. The "Preview images" tab lets you specify settings like when to capture that preview image, and lets you confirm that it's working as intended by giving you live code and image previews side-by-side.
Finishing up and deploying
The rest of the Generative flow is a simple set of options, including the kinds of sales you'd like to use, royalty settings, price, and more. We always recommend launching generative collections to a testnet first, so that you can preview the final project. When it's ready, simply open up your project, switch the blockchain, and launch on a production chain.
For more information about our generative code stack and the various pieces and methods available, please visit our Github repository.
Last updated
