Skip to main content

Random Generative JS

Verse supports javascript based generative projects. The most common implementation of such projects consists of html and javascript files capable of rendering the artwork. The artwork is rendered based on the unique hash that is generated at the time of the sale. An artwork is a combination of the unique hash and artist code that is deployed to IPFS.

How it works behind the scenes​

  1. Collector goes on Verse website, selects payment method and successfully pays for NFT.
  2. User sees the confirmation screen with iframe embed of the artwork together with the verifiable hash that was generated at the time of purchase.
  3. Verse system captures a preview image of the final state of the artwork (html file). Once preview image is captured it is visible for everyone in the grid of the project page.
  4. Preview image is uploaded on IPFS, metadata is generated and then metadata is uploaded on IPFS. Metadata will include name, image, attributes, hash, generator_url, description and if artwork is animated animation_url. Property generator_url / animation_url links to the project code on IPFS that can be used by collectors to generate high resolution outputs. If project is animated or interactive it will continue being so on marketplaces that support iFrame (OpenSea, LooksRare).
  5. NFTs are minted in batches automatically and when the gas is low-average (≤14 gwei).
  6. Once NFTs are minted they are immediately available to be indexed by OpenSea and other marketplaces.
  7. User can withdraw NFT to their private wallet. We currently cover gas for withdrawals.

Payload format​

Our system will add special payload parameter that will contain information such as hash, edition number and total editions. You can use this code to retrieve the payload:

const params = new URLSearchParams(window.location.search);
const q = params.get("payload");
const payload = JSON.parse(q ? atob(q) : "{}");

The resulting object will have the following structure:

{
    "hash":"0x...",
    "editionNumber":2,
    "totalEditions":2,
    "input":{
        "$username": "test"
    }
}

A few important notes:

  • hash has the following format: 0xaef1327b60ee3bba85e9c693bc09201f31a1e07c8ae19aec3e72b116ca456a7b
  • Previews of generative project will have editionNumber: 0, empty input ("input": {}) and current number of total editions
  • During NFT screenshot capture, "totalEditions" will always be 1
  • For the actual minted generative NFT, all params (editionNumber, totalEditions and input) will be correct
  • totalEditions is a dynamic parameter, meaning it is being updated for older NFTs to have an up-to-date amount of editions minted

Example project using p5js

Sample project​

Generative project structure on Verse is almost identical to a project on fxhash. The main idea is to use hash to initialise a pseudo random number generator and the rest of the code is art.

Example project using p5js

Generator preview

Testing​

For generative projects testing is very important to make sure collectors see the artwork consistently. While we currently do not have a self-upload testing platform we help to test projects internally. We will deploy the project on a testing platform and simulate the sales to make sure previews are generated successfully.

Traits/Features​

Verse supports traits/features that get extracted from the code and included in NFT metadata. Traits/Features are captured after the code execution hence they can be defined anywhere in the code.

An example code of adding traits/features. Either approach can be used.

// approach #1
window.$artifact = {
  features: {
    Palette: "Rainbow",
    Tree: "Oak",
    Signed: true,
  },
};

// approach 2
window.$artifact.features["Ambient Color"] = "Red";

Custom aspect ratio​

Useful if iterations can have different aspect ratios when capturing screenshot of the viewport

window.$artifact.aspectRatio = 0.7;

Custom preview image​

You can pass preview image directly from your generative script. To use it you need to prepare the image as base64 encoded string.

window.$artifact.preview = base64encodedString;

Example of all artifact features​

window.$artifact = {
  features: {
    Palette: "Rainbow",
    Tree: "Oak",
    Signed: true,
  },

  // (optional) custom preview data in base64 encoding (RFC2397)
  preview: base64encodedString,

  // (optional) useful if iterations can have different aspect ratios when capturing screenshot of the viewport
  aspectRatio: 0.7,
};

Trigger Preview Capture​

Verse will capture a preview of generative project to serve as a thumbnail. By default preview is captured with a delay, however you can trigger it in your code explicitly. To trigger preview capture add and call the function below when the project has completed rendering.

function capturePreview() {
  console.info("###verse-preview-capture");
}

Using this method is a recommended approach.

Tips​

  • Use Preview Capture trigger to make thumbnail appear faster for collectors
  • When preview is being captured on our virtual machine it opens the project with an additional parameter machine=true in the URL parameters. You can obtain this flag yourself using
    const isMachine = new URLSearchParams(window.location.search).get("machine");
    In the past this technique was used to create $artifact.preview data which can be more computationally expensive.

Examples of Generative JS projects on Verse​

Compatible sales mechanics​

Contract​

Each NFT belongs to a smart contract. Verse offers a one-click experience for artists to deploy a smart contract. Learn more.