Knowledge Base
  • 👨‍🎨For creators
    • 👋Intro to creating with Highlight
    • 📜Project quick start guides
      • Launch an open edition
      • Launch a delayed reveal collection
      • Launch a 1-of-1 auction
      • Launch a generative artwork
      • Launch an open edition generative artwork
      • Launch a PFP project
      • Launch a generative, image-based PFP project
      • Launch a ranked auction
      • Launch an onchain project
      • Launch a collector's choice project
      • Ongoing drops with the same contract
    • 🎇Learn the creation flows
      • ERC-721 vs. ERC-1155 Token Standards
      • Edition flow
      • Generative flow
      • Series flow
      • The importance of testing your collections
    • 👩‍💻Use embeds to build custom mint sites
      • Case Study: How Superchain Chiblings launched a fully custom website on Highlight x Base
      • Running a collector's choice mint via embeds
    • 💸Selling your NFTs
      • Available sale methods
        • Ranked auction
        • Dutch auction
        • English auction
      • Setting up gates (allowlists)
      • Combining sale methods
      • Configuring payment currencies
        • Accepting ERC20 payments
        • Accepting credit card payments
      • Payouts, royalties & splits
      • Livestream on the mint page
    • 🛠️Managing your collections
      • Hiding a collection
      • Mint creator reserves
      • Airdropping tokens
      • Updating collection metadata
      • Getting verified
      • Sponsored mints
      • Reducing collection size
    • 🔮Generative & onchain art tools
      • Highlight Studio
      • Onchain file system
      • Storing SVGs onchain
      • Downloading token metadata
      • How onchain is Highlight?
    • 🌐Integrations & ecosystem
      • Farcaster
      • Paragraph.xyz
      • Foundation Worlds
        • Importing a collection to Worlds
        • Foundation × Highlight FAQs
      • Export generative art from Cables.gl
      • Highlight on mobile
    • 🤓Advanced
      • Reusing contracts
      • Randomization algorithm
      • Upload asset specifications
      • Fulfilling auctions for non-transferable tokens
    • ✨About Highlight
      • Artwork policies
      • Highlight fees
  • For Collectors
    • 💳Buying
      • Buying on secondary
      • Exchange currency across chains
  • 💲Selling
    • Selling on secondary
    • Instantly sell & relist NFTs
  • 🔔Notifications
  • For developers
    • Intro to the Highlight Protocol
    • NFT contracts
      • Official addresses
      • ERC721GeneralSequence
      • ERC721General
      • ERC721EditionsDFS
      • ERC721SingleEditionDFS
      • ERC721GenerativeOnchain
      • Deprecated contracts
    • Custom metadata renderers
      • Example custom renderers
    • Minting protocol
      • Mint Managers
      • Mint Mechanics
        • Dutch auction mechanic
        • Ranked auction mechanic
        • Verisart mechanic
        • Seed-based mechanic
        • Auction Manager *
      • Referral Manager
    • Management modules
      • TokenManager
      • RoyaltyManager
    • Observability
    • Onchain File Storage
    • Mint fee oracle
    • Protocol rewards
      • Creator rewards
      • Mint referral rewards
    • Crosschain burn / redeem
  • Official links
    • ✨Highlight website
    • 🟣Highlight Farcaster
    • 🐦Highlight Twitter
    • 👋About us
Powered by GitBook
On this page
  • Drop a generative collection
  • Integrating hl-gen.js
  • Zip your files and upload
  • Test and preview your artwork
  • Preview image capturing
  • Finishing up and deploying
  1. For creators
  2. Learn the creation flows

Generative flow

Learn about launching generative art on Highlight

PreviousEdition flowNextSeries flow

Last updated 10 months ago

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 . In your index.html file, reference the hl-gen.js script before any of your drawing code:

<head>
  <script src="lib/hl-gen.js"></script>
  <script src="lib/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>

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 .

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 .

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

index.html
sketch.js
lib/
  ↳ p5.min.js
  ↳ hl-gen.js
fonts/
  ↳ IBMPlexMono-Regular.ttf
textures/
  ↳ texture-1.png
  ↳ texture-2.png

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

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 "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 for more fine-grained tooling.

The rest of the Generative flow is a simple set of options, including the kinds of 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 .

👨‍🎨
🎇
here
the Github repo
Github repo
Github repo
Highlight Studio
sales
Github repository