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>