🧬
GA Script Standard
The GA Script Standard is a reference for artists who want to release their generative art project on either GEN.ART or Eclipse.art.
In order to comply with the GEN.ART Rendering Engine your project root folder has to include the following files:
- 1.
index.html - 2.
sketch.js - 3.
style.css
The GEN.ART Rendering Engine will inject a tiny library (genart-lib.js) into your
html.index file. It contains global functions and objects to access specific properties and to communicate with the Rendering Engine. Outside the Rendering Engine the script expects the library to be loaded into a javascript script tag.<!-- load GA lib -->
<script id="genart-lib" src="https://api.gen.art/editor/genart-lib.js"></script>
<!-- YOUR CODE -->
Make sure to add
id="genart-lib" so it can be later interpreted by the Rendering Engine to not be loaded twice into your script.The
options object is created on mint and is available once the image of the token is generated. During testing you should define a mock object in the head tag of your index.html.<!-- load mock options object -->
<script id="genart-options" type="text/javascript">
const options = {
hash: random_hash(),
tokenId: '10001',
timestamp: Date.now(),
pixelDensity: 1,
};
</script>
Also here make sure to add
id="genart-options" so it can be later interpreted by the Rendering Engine to not be loaded twice into your script.// objects injected through https://api.gen.art/editor/genart-lib.js
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 };
/**
random hash function
*/
random_hash: () => string;
/**
set metadata value of property
*/
setMetadata: (prop: string, value: string | number | boolean) => void;
/**
get metadata value by property
*/
getMetadata: (prop: string) => string | number | boolean;
/**
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;
}
/**
* Key Listener
*/
createKeyListeners({ keys: string[], fn: () => void, description: string}[])
Each art piece depends on predefined metadata. It includes the key variables that shape the art pieces. The metadata properties should be human-readable since they are used on the marketplaces for filtering the collection. Typically an art work has 4-12 metadata properties.
The GA library defines a method
setMetadata. Whenever a metadata property is calculated just call it and pass its name and value.Example:
setMetadata('shape', 'square');
To create the deterministic metadata properties based on seeds the GA library provides a PRNG class called
Random. It is not obligatory to use it. However when using any PRNG it is important to use the options.hash as the seed.Example:
const hash = options.hash;
const rnd = new Random(hash, 4);
setMetadata('size', rnd.random_int(2, 3));
Once all the metadata properties were assigned the
onMetadata() function has to be called to notify the Rendering Engine to scrap them.Example:
// assign all properties with their values
setMetadata('prop1', rnd.random_int(2, 3));
setMetadata('prop2', rnd.random_int(0, 1));
setMetadata('prop3', rnd.random_choice(['a', 'b', 'c']));
// notify Rendering Engine all properties were assigned
onMetadata();
Once your script completed rendering notify the Rendering Engine to capture an image from the canvas. If you are using multiple canvases in your html, you have to pass the array index of the canvas in DOM node element.
Example:
/**
* draw something
**/
onDone();
// or multiple canvases
onDone(1);
If your script makes use of
p5js.pixelDensity or window.devicePixelRatio make sure to access it from the options object.Example:
// p5js
pixelDensity(options.pixelDensity);
// vanilla JS
window.devicePixelRatio = options.pixelDensity;
The GA library provides a function to attach key listeners to the documents body. They can be used to give users ability to modify or control the script.
NOTE: Only listeners attached via this API method are displayed on our website and mint pages.
createKeyListeners([
/**
* ALLOWED
*/
{
keys: ['Control', '5'],
fn: () => console.log('control+5 pressed'),
description: 'Some text',
},
{
keys: ['Control', 'B'],
fn: () => console.log('control+shift+b pressed'),
description: 'Some text',
},
{
keys: ['Control', 'a'],
fn: () => console.log('control+a pressed'),
description: 'Some text',
},
{ keys: ['a'], fn: () => console.log('a pressed'), description: 'Some text' },
{
keys: ['A'],
fn: () => console.log('shift+a pressed'),
description: 'Some text',
},
/**
* NOT ALLOWED
*/
{
keys: ['Shift', 'Meta', 'B'],
fn: () => console.log("won't trigger"),
},
{
keys: ['Meta', 'B'],
fn: () => console.log("won't trigger"),
},
{
keys: ['Shift', 'Control', 'B'],
fn: () => console.log("won't trigger"),
},
/**
* Only MacOS
*/
{
keys: ['Meta', 'b'],
fn: () => console.log('command+b pressed'),
description: 'Some text',
}, // command on MacOS
/**
* Only Windows
*/
{
keys: ['Alt', 'b'],
fn: () => console.log('alt+b pressed on windows PC'),
},
]);
We do also support other javascript libraries like
ThreeJS. Just include the code into a javascript script tag.<head>
<!-- load p5js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<!-- load GA lib -->
<script
id="genart-lib"
type="text/javascript"
src="https://test-api.gen.art/editor/genart-lib.js"
></script>
<!-- load mock options object -->
<script id="genart-options" type="text/javascript">
const options = {
hash: random_hash(),
tokenId: '10001',
timestamp: Date.now(),
pixelDensity: 1,
};
</script>
<!-- add style -->
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<!-- add sketch-->
<script id="genart-script" src="sketch.js">
setup() {
const hash = options.hash;
const rnd = new Random(hash, 4);
const color = 'red';
setMetadata('color', color);
pixelDensity(options.pixelDensity);
setMetadata('size', rnd.random_int(2, 3));
background(getMetadata('color'));
onMetadata();
}
draw() {
/**
draw something
*/
onDone();
}
</script>
</body>
Last modified 1mo ago