Technical Specifications

General concepts

Code based generative art must work in a browser context, i.e. HTML, CSS, JS
  • All files MUST be included in the submission and cannot use external hosting.
  • WASM is supported when not using SharedArrayBuffer or workers. Our current security restrictions mean we cannot support these at the moment. If this impacts your work, please reach out directly.
Each submission MUST contain an index.html file. This file is the entry point for displaying art. You should account for default stylesheets for different user agents on index.html.
Each piece MUST size the canvas of the art to window.innerWidth and window.innerHeight and should listen for resize events on globalThis.
Each submission utilizing the WebGL (or WebGL2) canvas context, MUST enable preserveDrawingBuffer: true when requesting the context object from the Canvas API.For example:
ctx = canvas.getContext("webgl", { preserveDrawingBuffer: true });
This setting does not significantly impact the performance on Layer's hardware and it is required in order for our Art Intelligence to accurately measure the spectral content of each artwork, as well as allowing the preview generation to capture frames from the canvas.

Using the SDK

In order to enable variations and preview generation, an art piece must implement all 3 of the following:

Step 1Import the Layer SDK

Copy and paste the script below:

<script src="https://script.layerstatic.com/layer/sdk-latest.js"></script>

See example usage. The SDK MUST be linked to this remote file so that we are able to make updates over time as needed.

The Typescript definitions can be found at:

https://script.layerstatic.com/layer/sdk-latest.d.ts

Step 2Define parameters for enabling variations

$layer.params({
  customization_level: 'ARTIST',
  kind: 'NUMBER',
  id: 'fps',
  name: 'FPS',
  min: 20,
  max: 80,
  step: 1,
  default: 30,
}).then(params => {
  // Use params record to initalize art
});

Step 3Enable thumbnail/preview generation

$layer.registerCanvas(canvasElement: HTMLCanvasElement): $layer

Enable FPS display

Layer SDK has a built in FPS counter that can be enable programmatically or with a URL search parameter.

Step 1Import the Layer SDK

Copy and paste the script below:

<script src="https://script.layerstatic.com/layer/sdk-latest.js"></script>

See example usage

Step 2Optionally: Use URL search parameter

Add the search parameter to the URL for the piece to enable the overlay

?_layerfps

Optionally add the target FPS as the value, the default is 60

?_layerfps=90

Step 3Optionally: Use $layer.startFPSOverlay()

// there are 2 arguments: targetFPS and fill
$layer.startFPSOverlay(60, true);

Tips

There is a parameter integration testing sandbox available at https://sandbox.layer.com

When using WebGL rendering, make sure to preserve drawing buffers in order to enable previews. This will enable the canvas to render the frame while continuing to play.

More

Layer SDK
Check out the source code for generative pieces in full.
WebGL Features and Limits
Screenshots from a device using the same chipset as the device being developed.