Skip to main content

Random Generative JS

info

This section is still in progress and is expected to change.

Verse supports javascript based generative projects. The most common implementation of such projects consist of a 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). We currently cover gas for minting.
  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.

Additional details​

  • It is possible to pass more details to the script. Such as artwork number, sale price, time of purchase etc.

Additional parameters (coming early 2023)​

Some artist have requested ability for collectors to have greater impact on the outputs of generative works and to make outputs more personalised to the collector. We are working to support generative projects where collector could provide additional (script related) information at the time of purchase that would be later on passed to the script. The script can use this information to render the output differently based on the input.

For example let's consider a generative project that renders a forest. In this case artist might like to allow collector to provide some details to the script that would affect how artwork is rendered. For example artist might allow collector to specify type of a tree (Oak, Willow, Yew) or specify a color of the leaves or pick a colour palette. (As you can see there might be a million of other variables here.)

We are currently working on this feature, but if you have any requests or ideas - please contact us!

Sample project​

Generative project structure on Verse is almost identical to project on fxhash. The main idea is to use hash to initialise pseudo random number generator and 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 self-upload testing platform we help to test project internally. We will deploy the project on testing platform, simulate the sales to make sure previews generated successfully. We can also mint test project on Goerli testnet that will be available to see on "OpenSea testnets".

Traits/Features​

Verse supports traits/features that gets extracted from the code and included to 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 witht a delay, however you can trigger it in your code explicitly. To trigger preview capture add and call the function below when the project 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 a additional parameter machine=true in the URL parameter. 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 one-click experience for artist to deploy a smart contract. Learn more.