Search…
⌃K
Links
🎛

JS Playground

GEN.ART JS Playground

General

The GEN.ART Playground allows whitelisted artists to submit their Javascript art to the team. It is a p5js/Javascript compiler with features to tweak code and tiny library to create deterministic PRNG. If you want to get whitelisted you have to apply here. You are still able to play around and compile your code though.

Javascript

The script should be a single file html that contains all the javascript and dependencies. It should also expect a global variable hash that is passed to a PRNG to create the generative randomness. On production that hash will be passed to the script once the NFT is minted on the blockchain. Our serves will take care of this handling.

p5.js

Javascript and p5.js provide the easiest way for artists to create generative art. While Javascript is an easy to understand programming language, p5.js provides a lot of tools to manipulate canvas and access browsers APIs and features of the underlying rendering engine.
More info about p5.js here: https://p5js.org/get-started/​

Other libraries

We do also support other javascript libraries like threeJS. If you want to use something specific, please reach out to the team.

Metadata

Each art piece depends on predefined metadata. It includes the key variables that shape the art piece. The metadata should be human-readable since it is display on the Opensea. Typically an art work has 8-12 metadata properties.
Define an object in the window at the beginning of your script: window.METADATA = { }. Whenever a metadata property is calculated just set it like window.METADATA["prop"] = value

onMetadata()

Once all the metadata properties where assigned to the window.METADATA object the onMetadata() function should be called to notify the top window.

Finished Event

Once your art has completed rendering or it's time to take a snapshot you should send a message to the top frame. This will signal the renderer to grab the image from the canvas. If you are using multiple canvases in your script, you have to pass the index of the DOM element.
onDone();
​
// or multiple canvases
onDone(1);

Testing

Make sure to use our playground and test your script on different devices, screen sizes and browsers.

Files

The art script contains 4 files:
  1. 1.
    index.html
  2. 2.
    script.js
  3. 3.
    style.css
  4. 4.
    tweaks.json

Global

interface Global {
/**
should be called once all metadata properties were assigned
*/
onMetadata: () => void;
​
/**
should be called when script is done rendering
*/
onDone: () => void;
​
/**
Metadata object
*/
METADATA: { [name: string]: string };
​
/**
tweaks values object
*/
tweaks: any;
​
/**
random hash function
*/
random_hash: () => string;
​
/**
an options object which contains the token information
*/
options: {
hash: string;
tokenId: string;
timestamp: number;
pixelDensity: number;
};
}
​
/**
PRNG
*/
declare class Random {
private seed;
constructor(hash: string, decimals: number);
random_dec(): number;
random_between(a: number, b: number): number;
random_int(a: number, b: number): number;
random_choice(x: string[]): string;
}

Tweaks

Tweaks provide a way to modify input variables with a UI pane. Before you can use it, you have to define your tweaks object in the tweaks.json file.

Input types

  • Numerical range
  • Boolean
  • Hex color
  • RGBA
  • RGB
  • Text value
  • Select

Example

{
"tweak_range": {
"value": 1,
"min": -10,
"max": 10,
"step": 1
},
"tweak_range_2": {
"value": 1,
"min": -10,
"max": 10
},
"bool": true,
"tweak_select": {
"value": "Up",
"label": "Down",
"options": ["Up", "Down"]
},
"text_value": "foo",
"hex_color": "#ff005b",
"rgba_color": {
"r": 248,
"g": 214,
"b": 40,
"a": 1
}
}

Access tweaks object and global functions

In your javascript code (script.js) you can access the values by the name of your tweak input value.
setup() {
const hash = options.hash;
const rnd = new Random(hash, 4);
background(tweaks.hex_color);
window.METADATA.color = tweaks.hex_color;
window.METADATA.size = rnd.random_int(2, 3);
onMetadata();
}
​
draw() {
/**
draw something
*/
onDone();
}