Multiple Parameters
This example demonstrates implementing multiple parameters with different customization levels and listening for parameter change events.
Parameters
FPS
Number parameter (range 20–80, default 30) at ARTIST level
Variance
Float parameter (range -1 to 1, step 0.1, default 0.2) at CURATOR level
Color
Color picker (default #ff0000) at VIEWER level
Boolean
Toggle parameter at VIEWER level
Choice
List with three options at VIEWER level
Code
<canvas
id="c"
width="1024"
height="1024"
style="background-color: white"
></canvas>
<script src="https://script.layerstatic.com/layer/sdk-latest.js"></script>
<script type="module">
import App from './app.js';
const app = new App();
const canvas = document.getElementById('c');
canvas.width = $layer.width;
canvas.height = $layer.height;
$layer.registerCanvas(canvas);
globalThis.addEventListener('layer:paramchange', (event) => {
switch (event.detail.id) {
case 'fps': app.setFPS(event.detail.value); break;
case 'color': app.setColor(event.detail.value); break;
case 'variance': app.setVariance(event.detail.value); break;
case 'choice': app.setChoice(event.detail.value); break;
case 'boolean': app.isConscious = event.detail.value; break;
}
});
const { fps, color, variance, choice, boolean } = await $layer
.params(
{
customization_level: 'ARTIST',
kind: 'NUMBER',
id: 'fps',
name: 'FPS',
min: 20,
max: 80,
step: 1,
default: 30,
},
{
customization_level: 'CURATOR',
kind: 'NUMBER',
id: 'variance',
name: 'Float',
description: 'Vary the skew',
min: -1,
max: 1,
step: 0.1,
default: 0.2,
},
{
customization_level: 'VIEWER',
id: 'color',
kind: 'COLOR',
name: 'Color',
default: '#ff0000',
},
{
customization_level: 'VIEWER',
id: 'boolean',
kind: 'BOOLEAN',
name: 'Boolean',
default: false,
},
{
customization_level: 'VIEWER',
id: 'choice',
kind: 'LIST',
name: 'List',
default: 'option2',
options: [
{
value: 'option1',
label: 'Best',
},
{
value: 'option2',
label: 'Better',
},
{
value: 'option3',
label: 'Good',
},
],
}
);
app.setFPS(fps);
app.setColor(color);
app.setVariance(variance);
app.setChoice(choice);
app.isConscious = boolean;
app.playing = true;
</script>