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
});

Parameter types

Every parameter shares a common set of base properties. Set kind to one of NUMBER, BOOLEAN, COLOR, LIST, or HASH to select the input type, and the additional properties for that kind become available. Once initialized, read values back via $layer.parameters[id].

Base properties (all kinds)

id — unique key used to read the value from $layer.parameters. Required.
name — display label shown to the user. Required.
kind — one of NUMBER, BOOLEAN, COLOR, LIST, HASH. Required.
description — tooltip text explaining the parameter to the user. Optional.
customization_level — who can change the value: ARTIST, CURATOR, or VIEWER. Defaults to VIEWER.
default — initial value when the viewer has not set one. Type depends on kind.

NUMBER

A numeric slider bounded by min and max, incremented in step units. Use for frame rates, counts, intensities, or any continuous value.

min — lower bound. Defaults to 0.
max — upper bound. Defaults to 100.
step — increment between allowed values. Defaults to 1.
default — initial number within the min/max range.

BOOLEAN

A toggle with two states. Use for enabling or disabling a feature of the piece.

default — true or false.

COLOR

A color picker. The resolved value in $layer.parameters is a ColorResult that exposes .rgb, .hsl, and .hex alongside the raw string.

default — a HEX string matching /^#[A-Fa-f0-9]{6}$/. Defaults to #FFFFFF.

LIST

A dropdown of predefined options. Each option is either a plain string or an object with a value and an optional display label.

options — array of strings or { value, label? } objects. Required.
default — a string matching one of the option values.

HASH

A generated string useful as a seed for deterministic randomness. The platform produces a new value per variation that matches the requested pattern and length.

pattern — character set for generated values: ALPHANUMERIC, HEX, ALPHABETIC, or BASE64. Defaults to ALPHANUMERIC.
minLength — minimum number of characters. Optional.
maxLength — maximum number of characters. Optional.
default — initial string. Optional.

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.