Main idea is to establish communication between Generative project created by the artists and Generative platform displaying the project to maximise collector experience and overall integration of the project.
- Generative platform (Platform) - platform displaying generative projects as an iframe (Verse, OpenSea, fxhash, ArtBlocks etc.)
- Generative project (Project) - code written by artists that is embedded as an iframe into the Generative platform.
We also provide a Figma page with concept illustration.
There are many Projects that are being displayed on different Platforms as embedded iframes. However, Platforms doesn't have a standard way to communicate with Projects. For example, Platform is not aware is Project is loaded or not, it doesn't know when to capture preview of the artwork or how to trigger downloading high quality asset. For the last feature (high quality assets), collectors have to pressing a key or add additional parameters to the iframe URL, which is not a good user experience.
It should be easier for collectors to download high quality assets of their favourite artworks by simply clicking a download button that Generative platform implements based on their UI and product needs.
This Generative platform standard aims to define the standard between Generative platform and Generative projects to accomplish aforementioned task and address most common problems.
- Download Asset - allows Generative Platform to trigger downloading high quality asset rendered by Generative project. Generative platform may implement download button according to their own product and branding guidelines.
- Preview Capture Trigger - instructs Generative platform's preview capturing system to capture current state of the generated artwork.
- Delegated Loading - allows Generative platform to show loading UI while Generative project is loading. When Generative project finishes loading
Formal definition of the standard can be found here.
Note: If you're building On-Chain project, please refer to this section.
Artist may choose to implement one or more features that Generative platform supports. Most important feature is Download Asset. We have prepared a small library that you can use to implement this feature. You can find it here (minified) or here (unminified).
You can also find a full example of how to use it here.
To allow Generative platform trigger signals such as asset download implement the following code:
gpsImplSignals = [
{
"type": "download",
"key": "download-small",
"text": "512 x 515"
},
{
"type": "download",
"key": "download-medium",
"text": "1024 x 1024"
},
{
"type": "download",
"key": "download-large",
"text": "2048 x 2048"
}
]Then define a function gpsOnDownload, library will automatically call this function when user clicks on the download
button. Second argument is a callback you need to invoke when dataURL for image is ready.
Project does not initiate download within this standard. Instead, it sends data url to platform and platform handles download on its own.
gpsOnDownload = (key, onReady) => {
const canvas = document.querySelector("canvas");
const dataURL = canvas.toDataURL("image/png");
onReady(dataURL, "png");
}This trigger should be called when you want to instruct Platform to capture current state of the artwork.
When your artwork is finished rendering call gpsCaptPrev() method.
To delegate loading UI to generative platform add the following code.
When your project is finished loading or you'd like it to be displayed call gpsLoadCompl() method.
We do understand that for on-chain project size of the project is very important. The actual minified standard is less than 500 bytes. However, if you're not using all the features you can do the following:
- Edit source file to remove unused features
- Minify the file either using
yarn build:projector using any other cusom tool for minifaction - Use the minified file in your project
All work with standard API is done within GenArtPlatform class.
Source code can be found here.
You can also check out example to see how it works.
Given a project is always an iframe you need to pass a DOM element of an iframe to the class:
const projectIframe = containerElement.querySelector(".project-iframe");
new GenArtPlatform(projectIframe, {
// here we pass callbacks that will be discussed later
})Note: library will handle case with multiple projects itself, no need to add additional code.
When you initialise a class you can pass callbacks that will be called when project sends signals. Currently, following callbacks are supported:
This callback is called when project is initialised (meaning that project supports the standard and is ready to receive further signals):
function onInit(version, signals) {
// here `version` is actual version of standard
// `signals` is the array of signals that project supports
console.log(genArtPlatform.downloadSignals);
}Important: after onInit is called you have access to genArtPlatform.downloadSignals array.
Here you can find all possible image resolutions for download. You can use this array to build
your UI.
This callback is called when project sends a signal that it's finished loading:
function onLoadComplete() {
// here you can hide loading UI
}This callback is called when project sends a signal to capture a preview:
function onCapturePreview() {
// here you can make a screenshot of the project for a static preview
}This method triggers download of the asset. It accepts one argument - key of particular download
option. You can retrieve these keys from genArtPlatform.downloadSignals array.
genArtPlatform.triggerDownload("some-key");