particles/modules/particles-player-sk/particles-player-sk-demo.ts

import './index';
import './particles-player-sk-demo.css';
import { $$ } from 'common-sk/modules/dom';
import { ParticlesPlayerSk } from './particles-player-sk';

const player = $$<ParticlesPlayerSk>('particles-player-sk')!;

const nouniforms = {
  width: 256,
  height: 256,
  body: {
    Bindings: [],
    Code: ['void effectSpawn(inout Effect effect) {',
      '  effect.lifetime = 4;',
      '  effect.rate = 120;',
      '  effect.spin = 6;',
      '}',
      '',
      'void spawn(inout Particle p) {',
      '  p.lifetime = 2 + rand(p.seed);',
      '  p.vel = p.dir * mix(50, 60, rand(p.seed));',
      '}',
      '',
      'void update(inout Particle p) {',
      '  p.scale = 0.5 + 1.5 * p.age;',
      '  float3 a0 = float3(0.098, 0.141, 0.784);',
      '  float3 a1 = float3(0.525, 0.886, 0.980);',
      '  float3 b0 = float3(0.376, 0.121, 0.705);',
      '  float3 b1 = float3(0.933, 0.227, 0.953);',
      '  p.color.rgb = mix(mix(a0, a1, p.age), mix(b0, b1, p.age), rand(p.seed));',
      '}',
      '',
    ],
    Drawable: {
      Type: 'SkCircleDrawable',
      Radius: 2,
    },
    MaxCount: 800,
  },
};

const uniforms = {
  width: 256,
  height: 256,
  body: {
    MaxCount: 800,
    Drawable: {
      Type: 'SkCircleDrawable',
      Radius: 2,
    },
    Code: [
      'uniform float3 slider_color;',
      'uniform float slider_rate;',
      'uniform float slider_spin;',
      '',
      'void effectSpawn(inout Effect effect) {',
      '  effect.lifetime = 4;',
      '}',
      '',
      'void effectUpdate(inout Effect effect) {',
      '  effect.rate = 100 * slider_rate;',
      '  effect.spin = 10 * slider_spin;',
      '}',
      '',
      'void spawn(inout Particle p) {',
      '  p.lifetime = 2 + rand(p.seed);',
      '  p.vel = p.dir * mix(50, 60, rand(p.seed));',
      '}',
      '',
      'void update(inout Particle p) {',
      '  p.color.rgb = slider_color;',
      '}',
      '',
    ],
    Bindings: [],
  },
};

player.initialize(uniforms).then(() => {
  player.pause();
  $$('#results')!.innerHTML = '<div id=loaded>Loaded.</div>';
});

$$('#pause')!.addEventListener('click', () => player.pause());
$$('#play')!.addEventListener('click', () => player.play());
$$('#reset')!.addEventListener('click', () => player.resetView());
$$('#restart')!.addEventListener('click', () => player.restartAnimation());

$$('#nouniforms')!.addEventListener('click', () => { player.initialize(nouniforms); });
$$('#uniforms')!.addEventListener('click', () => { player.initialize(uniforms); });