Multiple parameters

Multiple Parameters, listening for layer:preview event

<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) {
      // optionally, $layer.parameters[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>