@wolsok/thanos 17.0.38 → 18.1.0

package/README.md

@@ -50,29 +50,83 @@ export class SharedModule {}
 
 #### `WsThanosOptions` to configure ws-thanos:
 
-| field                |  type  | default |                        description |
-| -------------------- | :----: | ------: | ---------------------------------: |
-| animationLength      | number |    5000 |         the animation length in ms |
-| maxParticleCount     | number |  400000 |            max amount of particles |
-| particleAcceleration | number |      30 | speed of the particle acceleration |
+| field                |  type   | default |                                                          description |
+| -------------------- | :-----: | ------: | -------------------------------------------------------------------: |
+| animationLength      | number  |    5000 |                                           the animation length in ms |
+| maxParticleCount     | number  | 3000000 | max amount of particles (capped at 400000 without WebGL2, see below) |
+| particleAcceleration | number  |      30 |                                   speed of the particle acceleration |
+| sound                | boolean |    true |                           play a windy, sandy sound while vaporizing |
+| soundVolume          | number  |     0.5 |                                      volume of the sound from 0 to 1 |
+| crumble              | string  |  shards |                   how the element breaks apart, see crumble variants |
+
+#### Sound
+
+Every snap plays a sound, generated live with the Web Audio API (no audio files are downloaded),
+timed to `animationLength` and slightly different every time:
+
+1. the element breaks with a crunch of many small cracks and a low rumble,
+2. a gusty wind slowly grows stronger and carries hissing, crackling sand,
+3. wind and sand get weaker in the last third and have faded away at 85% of the animation.
+
+With `crumble: 'dust'` there is no crunch or rumble, the dust only crackles thinly.
+A limiter keeps many simultaneous snaps from getting too loud.
+Browsers only allow audio after the user interacted with the page, so snaps before the first click or tap stay silent.
+Turn it off with `provideWsThanosOptions({ sound: false })`.
+
+#### GPU rendering
+
+The particles are simulated and drawn on the graphics card with WebGL2,
+one particle per device pixel (up to a pixel ratio of 2) for crisp results on high resolution screens.
+Without WebGL2 ws-thanos falls back to the CPU canvas renderer, which captures at css pixels and uses at most 400000 particles.
+The effect canvas has a `data-ws-thanos-renderer` attribute (`webgl` or `canvas`) showing which renderer is in use.
+
+#### Crumble variants
+
+The `crumble` option decides how the element breaks apart while it vaporizes:
+
+| crumble    | effect                                                                       |
+| ---------- | ---------------------------------------------------------------------------- |
+| `'dust'`   | particles blow away along the vaporizing front                               |
+| `'cracks'` | cracks spread through the element and get finer before it turns to dust      |
+| `'shards'` | (default) cracks split it into shards that shift and tilt, then turn to dust |
+| `'chunks'` | whole chunks break off, jump away and crumble to dust                        |
+
+The variants need WebGL2, the canvas fallback always turns into `'dust'`.
+The effect canvas shows the variant in use in its `data-ws-thanos-crumble` attribute.
+
+#### Options per element
+
+Override any option for a single element with the `wsThanosOptions` input:
+
+```html
+<div wsThanos [wsThanosOptions]="{ crumble: 'chunks', animationLength: 8000 }">
+  Breaks into chunks
+</div>
+```
+
+or pass them to `WsThanosService.vaporize(element, { crumble: 'cracks' })`.
 
 ### `WsThanosDirective` usage
 
 Use the directive `wsThanos` on your element and reference it using `@ViewChild(WsThanosDirective)` in your component or
 directly in html via template ref:
 
-```
-<div wsThanos
-  #thanos="thanos"
-  (wsThanosComplete)=onComplete()>
+```html
+<div wsThanos #thanos="thanos" (wsThanosComplete)="onComplete()">
   This div will be vaporized on click
-  </div>
-<button (click)="thanos.vaporizeAndScrollIntoView(removeElement)">
+</div>
+<button (click)="thanos.vaporize(true)">Vaporize</button>
 ```
 
+- `vaporize(removeElem = true)` starts the effect and returns an observable that emits once it is complete.
+  With `removeElem = false` the element fades back in afterwards instead of being removed.
+- `vaporize$(removeElem = true)` returns an observable of the `AnimationState` of every frame. Subscribe to start the effect.
+
 ### `WsThanosService` usage
 
-Inject the 'WsThanosService' into your class. Call 'vaporizeAndScrollIntoView(removeElement)' and subscribe to it.
+Inject the `WsThanosService` into your class and subscribe to `vaporize(element, options?)` to vaporize any element.
+It emits the `AnimationState` of every frame and completes when the effect is done, unsubscribing cancels it.
+The element is not removed, that is up to you.
 
 ## Collaboration
 
@@ -134,6 +188,13 @@ See the [Nx Release documentation](https://nx.dev/features/manage-releases) for
 
 ## Migration
 
+To the release with sound and GPU rendering
+
+- The snap sound is on by default. Turn it off with `provideWsThanosOptions({ sound: false })`.
+- Elements crumble into shards by default. Use `provideWsThanosOptions({ crumble: 'dust' })` for the previous look.
+- `maxParticleCount` defaults to 3000000, one particle per device pixel on the GPU.
+  Without WebGL2 at most 400000 particles are used, even if you configured more.
+
 From `1.0.1` to `2.0.0`
 
 - Replace `WsThanosModule` in imports and exports with `WsThanosDirective`

package/esm2022/lib/canvas-particle-renderer.js

@@ -0,0 +1,98 @@
+import { MIN_PARTICLE_ALPHA, PARTICLE_STATE_LENGTH, ParticleStateIndex as P, } from './particles';
+import { SimplexNoise } from './simplex-noise';
+import { FLOW_FIELD, isBehindFront, vaporizingFront } from './vaporizing-front';
+/** the CPU can't keep up with more particles than this */
+export const CANVAS_MAX_PARTICLE_COUNT = 400_000;
+const FLOW_FIELD_RES = 0.05;
+/** Fallback renderer that simulates on the CPU and draws with a 2d context. */
+export class CanvasParticleRenderer {
+    constructor(canvas, particles, params) {
+        this.canvas = canvas;
+        this.particles = particles;
+        this.params = params;
+        this.kind = 'canvas';
+        /** the CPU can't afford to simulate cracks and shards */
+        this.crumble = 'dust';
+        this.noise = new SimplexNoise({
+            frequency: FLOW_FIELD.frequency,
+            min: 0,
+        });
+        canvas.width = params.width;
+        canvas.height = params.height;
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        if (context == null) {
+            throw new Error('Could not get 2d context for vaporize canvas');
+        }
+        this.context = context;
+    }
+    render(animationState) {
+        updateParticlesOnCpu({
+            particles: this.particles,
+            animationState,
+            particleAcceleration: this.params.particleAcceleration,
+            noise: this.noise,
+            seed: this.params.seed,
+        });
+        drawParticlesOnCpu(this.context, this.particles);
+    }
+    dispose() {
+        this.canvas.remove();
+    }
+}
+function isVisibleInside(state, base, width, height) {
+    const x = state[base + P.X];
+    const y = state[base + P.Y];
+    return (x <= width &&
+        x >= 0 &&
+        y <= height &&
+        y >= 0 &&
+        state[base + P.ALPHA] >= MIN_PARTICLE_ALPHA);
+}
+export function updateParticlesOnCpu({ particles: { state, count, maxParticleX, minParticleY }, animationState: { deltaTSec, animationT, maxWidth, maxHeight }, particleAcceleration, noise, seed, }) {
+    const front = vaporizingFront(animationT, maxParticleX, minParticleY, maxHeight);
+    for (let i = 0; i < count; i++) {
+        const base = i * PARTICLE_STATE_LENGTH;
+        // only update particles that are inside view and visible
+        if (!isVisibleInside(state, base, maxWidth, maxHeight)) {
+            continue;
+        }
+        const particleX = state[base + P.X];
+        const particleY = state[base + P.Y];
+        if (state[base + P.RELEASED_AT] === 0) {
+            if (isBehindFront(particleX, particleY, maxHeight, deltaTSec, seed, front)) {
+                state[base + P.RELEASED_AT] = Math.max(animationT, 0.0001);
+                state[base + P.AX] = Math.random();
+                state[base + P.AY] = Math.random() * -1;
+            }
+        }
+        else {
+            // flow along the noise velocity field
+            state[base + P.AX] += noise.scaled3D(particleX, particleY, seed + FLOW_FIELD.xSeedOffset, FLOW_FIELD_RES);
+            state[base + P.AY] -= noise.scaled3D(particleX, seed / FLOW_FIELD.ySeedDivisor, particleY, FLOW_FIELD_RES);
+        }
+        state[base + P.VX] += state[base + P.AX] * particleAcceleration * deltaTSec;
+        state[base + P.VY] += state[base + P.AY] * particleAcceleration * deltaTSec;
+        state[base + P.X] += state[base + P.VX] * deltaTSec;
+        state[base + P.Y] += state[base + P.VY] * deltaTSec;
+        state[base + P.ALPHA] *= front.fade;
+    }
+}
+export function drawParticlesOnCpu(context, { state, colors, count }) {
+    const { width, height } = context.canvas;
+    context.clearRect(0, 0, width, height);
+    const image = context.getImageData(0, 0, width, height);
+    const pixels = image.data;
+    for (let i = 0; i < count; i++) {
+        const base = i * PARTICLE_STATE_LENGTH;
+        if (!isVisibleInside(state, base, width, height)) {
+            continue;
+        }
+        const pixel = (~~state[base + P.Y] * width + ~~state[base + P.X]) * 4;
+        pixels[pixel] = colors[i * 4];
+        pixels[pixel + 1] = colors[i * 4 + 1];
+        pixels[pixel + 2] = colors[i * 4 + 2];
+        pixels[pixel + 3] = ~~state[base + P.ALPHA];
+    }
+    context.putImageData(image, 0, 0);
+}
+//# sourceMappingURL=canvas-particle-renderer.js.map

package/esm2022/lib/canvas-particle-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-particle-renderer.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/canvas-particle-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import { AnimationState } from './animation.state';\nimport { ParticleRenderer, ParticleRendererParams } from './particle-renderer';\nimport {\n  MIN_PARTICLE_ALPHA,\n  PARTICLE_STATE_LENGTH,\n  ParticleStateIndex as P,\n  Particles,\n} from './particles';\nimport { SimplexNoise } from './simplex-noise';\nimport { FLOW_FIELD, isBehindFront, vaporizingFront } from './vaporizing-front';\n\n/** the CPU can't keep up with more particles than this */\nexport const CANVAS_MAX_PARTICLE_COUNT = 400_000;\n\nconst FLOW_FIELD_RES = 0.05;\n\nexport interface UpdateParticlesParams {\n  particles: Particles;\n  animationState: AnimationState;\n  particleAcceleration: number;\n  noise: SimplexNoise;\n  seed: number;\n}\n\n/** Fallback renderer that simulates on the CPU and draws with a 2d context. */\nexport class CanvasParticleRenderer implements ParticleRenderer {\n  public readonly kind = 'canvas';\n  /** the CPU can't afford to simulate cracks and shards */\n  public readonly crumble = 'dust';\n  private readonly noise = new SimplexNoise({\n    frequency: FLOW_FIELD.frequency,\n    min: 0,\n  });\n  private readonly context: CanvasRenderingContext2D;\n\n  public constructor(\n    public readonly canvas: HTMLCanvasElement,\n    private readonly particles: Particles,\n    private readonly params: ParticleRendererParams\n  ) {\n    canvas.width = params.width;\n    canvas.height = params.height;\n    const context = canvas.getContext('2d', { willReadFrequently: true });\n    if (context == null) {\n      throw new Error('Could not get 2d context for vaporize canvas');\n    }\n    this.context = context;\n  }\n\n  public render(animationState: AnimationState): void {\n    updateParticlesOnCpu({\n      particles: this.particles,\n      animationState,\n      particleAcceleration: this.params.particleAcceleration,\n      noise: this.noise,\n      seed: this.params.seed,\n    });\n    drawParticlesOnCpu(this.context, this.particles);\n  }\n\n  public dispose(): void {\n    this.canvas.remove();\n  }\n}\n\nfunction isVisibleInside(\n  state: Float32Array,\n  base: number,\n  width: number,\n  height: number\n): boolean {\n  const x = state[base + P.X];\n  const y = state[base + P.Y];\n  return (\n    x <= width &&\n    x >= 0 &&\n    y <= height &&\n    y >= 0 &&\n    state[base + P.ALPHA] >= MIN_PARTICLE_ALPHA\n  );\n}\n\nexport function updateParticlesOnCpu({\n  particles: { state, count, maxParticleX, minParticleY },\n  animationState: { deltaTSec, animationT, maxWidth, maxHeight },\n  particleAcceleration,\n  noise,\n  seed,\n}: UpdateParticlesParams): void {\n  const front = vaporizingFront(\n    animationT,\n    maxParticleX,\n    minParticleY,\n    maxHeight\n  );\n\n  for (let i = 0; i < count; i++) {\n    const base = i * PARTICLE_STATE_LENGTH;\n    // only update particles that are inside view and visible\n    if (!isVisibleInside(state, base, maxWidth, maxHeight)) {\n      continue;\n    }\n    const particleX = state[base + P.X];\n    const particleY = state[base + P.Y];\n\n    if (state[base + P.RELEASED_AT] === 0) {\n      if (\n        isBehindFront(particleX, particleY, maxHeight, deltaTSec, seed, front)\n      ) {\n        state[base + P.RELEASED_AT] = Math.max(animationT, 0.0001);\n        state[base + P.AX] = Math.random();\n        state[base + P.AY] = Math.random() * -1;\n      }\n    } else {\n      // flow along the noise velocity field\n      state[base + P.AX] += noise.scaled3D(\n        particleX,\n        particleY,\n        seed + FLOW_FIELD.xSeedOffset,\n        FLOW_FIELD_RES\n      );\n      state[base + P.AY] -= noise.scaled3D(\n        particleX,\n        seed / FLOW_FIELD.ySeedDivisor,\n        particleY,\n        FLOW_FIELD_RES\n      );\n    }\n\n    state[base + P.VX] += state[base + P.AX] * particleAcceleration * deltaTSec;\n    state[base + P.VY] += state[base + P.AY] * particleAcceleration * deltaTSec;\n    state[base + P.X] += state[base + P.VX] * deltaTSec;\n    state[base + P.Y] += state[base + P.VY] * deltaTSec;\n    state[base + P.ALPHA] *= front.fade;\n  }\n}\n\nexport function drawParticlesOnCpu(\n  context: CanvasRenderingContext2D,\n  { state, colors, count }: Particles\n): void {\n  const { width, height } = context.canvas;\n  context.clearRect(0, 0, width, height);\n  const image = context.getImageData(0, 0, width, height);\n  const pixels = image.data;\n  for (let i = 0; i < count; i++) {\n    const base = i * PARTICLE_STATE_LENGTH;\n    if (!isVisibleInside(state, base, width, height)) {\n      continue;\n    }\n    const pixel = (~~state[base + P.Y] * width + ~~state[base + P.X]) * 4;\n    pixels[pixel] = colors[i * 4];\n    pixels[pixel + 1] = colors[i * 4 + 1];\n    pixels[pixel + 2] = colors[i * 4 + 2];\n    pixels[pixel + 3] = ~~state[base + P.ALPHA];\n  }\n  context.putImageData(image, 0, 0);\n}\n"]}

package/esm2022/lib/capture-scale.js

@@ -0,0 +1,13 @@
+/** the effect canvas is wider and taller than the element so particles have room to fly */
+export const EFFECT_WIDTH_SCALE = 2;
+export const EFFECT_HEIGHT_SCALE = 5;
+const MAX_DEVICE_PIXEL_RATIO = 2;
+/**
+ * Scale used to capture the element: device pixels for crisp particles,
+ * but small enough that the effect canvas fits the device's max canvas size.
+ */
+export function computeCaptureScale({ width, height, devicePixelRatio, maxCanvasSize, }) {
+    const pixelRatio = devicePixelRatio > 0 ? devicePixelRatio : 1;
+    return Math.min(pixelRatio, MAX_DEVICE_PIXEL_RATIO, maxCanvasSize / Math.max(1, width * EFFECT_WIDTH_SCALE), maxCanvasSize / Math.max(1, height * EFFECT_HEIGHT_SCALE));
+}
+//# sourceMappingURL=capture-scale.js.map

package/esm2022/lib/capture-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture-scale.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/capture-scale.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AASjC;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,gBAAgB,EAChB,aAAa,GACM;IACnB,MAAM,UAAU,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,OAAO,IAAI,CAAC,GAAG,CACb,UAAU,EACV,sBAAsB,EACtB,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,kBAAkB,CAAC,EACvD,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC,CAC1D,CAAC;AACJ,CAAC","sourcesContent":["/** the effect canvas is wider and taller than the element so particles have room to fly */\nexport const EFFECT_WIDTH_SCALE = 2;\nexport const EFFECT_HEIGHT_SCALE = 5;\nconst MAX_DEVICE_PIXEL_RATIO = 2;\n\nexport interface CaptureScaleParams {\n  width: number;\n  height: number;\n  devicePixelRatio: number;\n  maxCanvasSize: number;\n}\n\n/**\n * Scale used to capture the element: device pixels for crisp particles,\n * but small enough that the effect canvas fits the device's max canvas size.\n */\nexport function computeCaptureScale({\n  width,\n  height,\n  devicePixelRatio,\n  maxCanvasSize,\n}: CaptureScaleParams): number {\n  const pixelRatio = devicePixelRatio > 0 ? devicePixelRatio : 1;\n  return Math.min(\n    pixelRatio,\n    MAX_DEVICE_PIXEL_RATIO,\n    maxCanvasSize / Math.max(1, width * EFFECT_WIDTH_SCALE),\n    maxCanvasSize / Math.max(1, height * EFFECT_HEIGHT_SCALE)\n  );\n}\n"]}

package/esm2022/lib/choose-particle-renderer.js

@@ -0,0 +1,78 @@
+import { computeCaptureScale } from './capture-scale';
+import { CANVAS_MAX_PARTICLE_COUNT, CanvasParticleRenderer, } from './canvas-particle-renderer';
+import { limitParticles } from './particles';
+import { WebGlParticleRenderer } from './webgl/webgl-particle-renderer';
+/**
+ * Browsers drop the oldest WebGL context once about 16 are alive,
+ * so only this many effects run on the GPU at the same time.
+ */
+const MAX_GPU_EFFECTS = 12;
+/** counts the effects that hold a WebGL context */
+export class GpuContextBudget {
+    constructor(max = MAX_GPU_EFFECTS) {
+        this.max = max;
+        this.live = 0;
+    }
+    tryAcquire() {
+        if (this.live >= this.max) {
+            return false;
+        }
+        this.live++;
+        return true;
+    }
+    release() {
+        this.live = Math.max(0, this.live - 1);
+    }
+}
+/**
+ * Picks the GPU renderer when WebGL2 is available and the GPU budget allows it,
+ * the CPU canvas renderer otherwise. If the GPU renderer fails to set up,
+ * it falls back to the canvas renderer.
+ */
+export function chooseParticleRenderer({ maxParticleCount, devicePixelRatio, createCanvas, gpuBudget = new GpuContextBudget(), }) {
+    const createCanvasRenderer = (particles, params) => new CanvasParticleRenderer(createCanvas(), limitParticles(particles, CANVAS_MAX_PARTICLE_COUNT), params);
+    const canvasChoice = {
+        maxParticleCount: Math.min(maxParticleCount, CANVAS_MAX_PARTICLE_COUNT),
+        captureScale: () => 1,
+        create: createCanvasRenderer,
+        release: () => undefined,
+    };
+    if (!gpuBudget.tryAcquire()) {
+        return canvasChoice;
+    }
+    const canvas = createCanvas();
+    const gl = WebGlParticleRenderer.createContext(canvas);
+    if (gl == null) {
+        gpuBudget.release();
+        return canvasChoice;
+    }
+    let released = false;
+    const release = () => {
+        if (released) {
+            return;
+        }
+        released = true;
+        // the renderer may have freed it already
+        if (!gl.isContextLost()) {
+            gl.getExtension('WEBGL_lose_context')?.loseContext();
+        }
+        gpuBudget.release();
+    };
+    const maxCanvasSize = WebGlParticleRenderer.maxCanvasSize(gl);
+    return {
+        maxParticleCount,
+        captureScale: (width, height) => computeCaptureScale({ width, height, devicePixelRatio, maxCanvasSize }),
+        create: (particles, params) => {
+            try {
+                return new WebGlParticleRenderer(canvas, gl, particles, params);
+            }
+            catch (error) {
+                console.warn('ws-thanos: falling back to canvas rendering', error);
+                release();
+                return createCanvasRenderer(particles, params);
+            }
+        },
+        release,
+    };
+}
+//# sourceMappingURL=choose-particle-renderer.js.map

package/esm2022/lib/choose-particle-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choose-particle-renderer.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/choose-particle-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import { computeCaptureScale } from './capture-scale';\nimport {\n  CANVAS_MAX_PARTICLE_COUNT,\n  CanvasParticleRenderer,\n} from './canvas-particle-renderer';\nimport { ParticleRenderer, ParticleRendererParams } from './particle-renderer';\nimport { limitParticles, Particles } from './particles';\nimport { WebGlParticleRenderer } from './webgl/webgl-particle-renderer';\n\n/**\n * Browsers drop the oldest WebGL context once about 16 are alive,\n * so only this many effects run on the GPU at the same time.\n */\nconst MAX_GPU_EFFECTS = 12;\n\n/** counts the effects that hold a WebGL context */\nexport class GpuContextBudget {\n  private live = 0;\n\n  public constructor(private readonly max = MAX_GPU_EFFECTS) {}\n\n  public tryAcquire(): boolean {\n    if (this.live >= this.max) {\n      return false;\n    }\n    this.live++;\n    return true;\n  }\n\n  public release(): void {\n    this.live = Math.max(0, this.live - 1);\n  }\n}\n\nexport interface ChooseParticleRendererParams {\n  maxParticleCount: number;\n  devicePixelRatio: number;\n  createCanvas: () => HTMLCanvasElement;\n  gpuBudget?: GpuContextBudget;\n}\n\nexport interface ParticleRendererChoice {\n  /** how many particles this renderer can handle */\n  readonly maxParticleCount: number;\n  /** scale to capture an element of the given css size */\n  captureScale(width: number, height: number): number;\n  create(\n    particles: Particles,\n    params: ParticleRendererParams\n  ): ParticleRenderer;\n  /** free the reserved GPU context, call it once the effect is over */\n  release(): void;\n}\n\n/**\n * Picks the GPU renderer when WebGL2 is available and the GPU budget allows it,\n * the CPU canvas renderer otherwise. If the GPU renderer fails to set up,\n * it falls back to the canvas renderer.\n */\nexport function chooseParticleRenderer({\n  maxParticleCount,\n  devicePixelRatio,\n  createCanvas,\n  gpuBudget = new GpuContextBudget(),\n}: ChooseParticleRendererParams): ParticleRendererChoice {\n  const createCanvasRenderer = (\n    particles: Particles,\n    params: ParticleRendererParams\n  ): ParticleRenderer =>\n    new CanvasParticleRenderer(\n      createCanvas(),\n      limitParticles(particles, CANVAS_MAX_PARTICLE_COUNT),\n      params\n    );\n  const canvasChoice: ParticleRendererChoice = {\n    maxParticleCount: Math.min(maxParticleCount, CANVAS_MAX_PARTICLE_COUNT),\n    captureScale: () => 1,\n    create: createCanvasRenderer,\n    release: () => undefined,\n  };\n\n  if (!gpuBudget.tryAcquire()) {\n    return canvasChoice;\n  }\n  const canvas = createCanvas();\n  const gl = WebGlParticleRenderer.createContext(canvas);\n  if (gl == null) {\n    gpuBudget.release();\n    return canvasChoice;\n  }\n\n  let released = false;\n  const release = () => {\n    if (released) {\n      return;\n    }\n    released = true;\n    // the renderer may have freed it already\n    if (!gl.isContextLost()) {\n      gl.getExtension('WEBGL_lose_context')?.loseContext();\n    }\n    gpuBudget.release();\n  };\n  const maxCanvasSize = WebGlParticleRenderer.maxCanvasSize(gl);\n  return {\n    maxParticleCount,\n    captureScale: (width, height) =>\n      computeCaptureScale({ width, height, devicePixelRatio, maxCanvasSize }),\n    create: (particles, params) => {\n      try {\n        return new WebGlParticleRenderer(canvas, gl, particles, params);\n      } catch (error) {\n        console.warn('ws-thanos: falling back to canvas rendering', error);\n        release();\n        return createCanvasRenderer(particles, params);\n      }\n    },\n    release,\n  };\n}\n"]}

package/esm2022/lib/create-ws-thanos-options.js

@@ -1,8 +1,11 @@
 export function createWsThanosOptions(options) {
     return {
         animationLength: 5000,
-        maxParticleCount: 400000,
+        maxParticleCount: 3_000_000,
         particleAcceleration: 30,
+        sound: true,
+        soundVolume: 0.5,
+        crumble: 'shards',
         ...options,
     };
 }

package/esm2022/lib/create-ws-thanos-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-ws-thanos-options.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/create-ws-thanos-options.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,qBAAqB,CACnC,OAAkC;IAElC,OAAO;QACL,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,MAAM;QACxB,oBAAoB,EAAE,EAAE;QACxB,GAAG,OAAO;KACX,CAAC;AACJ,CAAC","sourcesContent":["import { WsThanosOptions } from './ws-thanos.options';\n\nexport function createWsThanosOptions(\n  options?: Partial<WsThanosOptions>\n): WsThanosOptions {\n  return {\n    animationLength: 5000,\n    maxParticleCount: 400000,\n    particleAcceleration: 30,\n    ...options,\n  };\n}\n"]}
+{"version":3,"file":"create-ws-thanos-options.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/create-ws-thanos-options.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,qBAAqB,CACnC,OAAkC;IAElC,OAAO;QACL,eAAe,EAAE,IAAI;QACrB,gBAAgB,EAAE,SAAS;QAC3B,oBAAoB,EAAE,EAAE;QACxB,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,GAAG;QAChB,OAAO,EAAE,QAAQ;QACjB,GAAG,OAAO;KACX,CAAC;AACJ,CAAC","sourcesContent":["import { WsThanosOptions } from './ws-thanos.options';\n\nexport function createWsThanosOptions(\n  options?: Partial<WsThanosOptions>\n): WsThanosOptions {\n  return {\n    animationLength: 5000,\n    maxParticleCount: 3_000_000,\n    particleAcceleration: 30,\n    sound: true,\n    soundVolume: 0.5,\n    crumble: 'shards',\n    ...options,\n  };\n}\n"]}

package/esm2022/lib/crumble-shape.js

@@ -0,0 +1,24 @@
+const NONE = { coarseCrack: 0, fineCrack: 0, shardGrow: 0 };
+function smoothstep(edge0, edge1, x) {
+    const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));
+    return t * t * (3 - 2 * t);
+}
+/** cracks get wider and finer cracks appear while the element decays */
+export function crumbleShape(crumble, animationT) {
+    if (crumble === 'dust') {
+        return NONE;
+    }
+    if (crumble === 'chunks') {
+        return {
+            coarseCrack: (0.8 + 1.2 * smoothstep(0, 0.4, animationT)) / 2,
+            fineCrack: 0,
+            shardGrow: 0,
+        };
+    }
+    return {
+        coarseCrack: (0.8 + 4 * smoothstep(0, 0.55, animationT)) / 2,
+        fineCrack: (2.5 * smoothstep(0.12, 0.6, animationT)) / 2,
+        shardGrow: crumble === 'shards' ? smoothstep(0.03, 0.6, animationT) : 0,
+    };
+}
+//# sourceMappingURL=crumble-shape.js.map

package/esm2022/lib/crumble-shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crumble-shape.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/crumble-shape.ts"],"names":[],"mappings":"AAWA,MAAM,IAAI,GAAiB,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;AAE1E,SAAS,UAAU,CAAC,KAAa,EAAE,KAAa,EAAE,CAAS;IACzD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7B,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,YAAY,CAC1B,OAAwB,EACxB,UAAkB;IAElB,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,OAAO;YACL,WAAW,EAAE,CAAC,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC;YAC7D,SAAS,EAAE,CAAC;YACZ,SAAS,EAAE,CAAC;SACb,CAAC;IACJ,CAAC;IACD,OAAO;QACL,WAAW,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC;QAC5D,SAAS,EAAE,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC;QACxD,SAAS,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;KACxE,CAAC;AACJ,CAAC","sourcesContent":["import type { WsThanosCrumble } from './ws-thanos.options';\n\nexport interface CrumbleShape {\n  /** half width of the coarse cracks in css pixels, particles closer to a crack break off */\n  coarseCrack: number;\n  /** half width of the fine cracks in css pixels */\n  fineCrack: number;\n  /** 0 to 1, how far the shards have shifted and tilted */\n  shardGrow: number;\n}\n\nconst NONE: CrumbleShape = { coarseCrack: 0, fineCrack: 0, shardGrow: 0 };\n\nfunction smoothstep(edge0: number, edge1: number, x: number): number {\n  const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/** cracks get wider and finer cracks appear while the element decays */\nexport function crumbleShape(\n  crumble: WsThanosCrumble,\n  animationT: number\n): CrumbleShape {\n  if (crumble === 'dust') {\n    return NONE;\n  }\n  if (crumble === 'chunks') {\n    return {\n      coarseCrack: (0.8 + 1.2 * smoothstep(0, 0.4, animationT)) / 2,\n      fineCrack: 0,\n      shardGrow: 0,\n    };\n  }\n  return {\n    coarseCrack: (0.8 + 4 * smoothstep(0, 0.55, animationT)) / 2,\n    fineCrack: (2.5 * smoothstep(0.12, 0.6, animationT)) / 2,\n    shardGrow: crumble === 'shards' ? smoothstep(0.03, 0.6, animationT) : 0,\n  };\n}\n"]}

package/esm2022/lib/particle-renderer.js

@@ -0,0 +1 @@
+//# sourceMappingURL=particle-renderer.js.map

package/esm2022/lib/particle-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"particle-renderer.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/particle-renderer.ts"],"names":[],"mappings":"","sourcesContent":["import { AnimationState } from './animation.state';\nimport { WsThanosCrumble } from './ws-thanos.options';\n\n/** moves and draws the particles of one vaporizing element */\nexport interface ParticleRenderer {\n  /** where the simulation runs */\n  readonly kind: 'webgl' | 'canvas';\n  /** the effect canvas, positioned by the caller */\n  readonly canvas: HTMLCanvasElement;\n  /** how this renderer breaks the element apart */\n  readonly crumble: WsThanosCrumble;\n  /** advance the simulation by one frame and draw it */\n  render(animationState: AnimationState): void;\n  /** free all resources, the canvas is not usable afterwards */\n  dispose(): void;\n}\n\nexport interface ParticleRendererParams {\n  /** effect canvas size in device pixels */\n  width: number;\n  height: number;\n  particleAcceleration: number;\n  /** device pixels per css pixel */\n  pixelScale: number;\n  crumble: WsThanosCrumble;\n  /** random seed that makes every snap look different */\n  seed: number;\n}\n"]}

package/esm2022/lib/particles.js

@@ -0,0 +1,84 @@
+/** alpha (0-255) below which a particle counts as invisible */
+export const MIN_PARTICLE_ALPHA = ~~(255 * 0.01);
+/** float layout of one particle in {@link Particles.state} */
+export var ParticleStateIndex;
+(function (ParticleStateIndex) {
+    ParticleStateIndex[ParticleStateIndex["X"] = 0] = "X";
+    ParticleStateIndex[ParticleStateIndex["Y"] = 1] = "Y";
+    ParticleStateIndex[ParticleStateIndex["VX"] = 2] = "VX";
+    ParticleStateIndex[ParticleStateIndex["VY"] = 3] = "VY";
+    ParticleStateIndex[ParticleStateIndex["AX"] = 4] = "AX";
+    ParticleStateIndex[ParticleStateIndex["AY"] = 5] = "AY";
+    ParticleStateIndex[ParticleStateIndex["ALPHA"] = 6] = "ALPHA";
+    /** animationT when the particle broke off, 0 while attached, negative while a chunk falls */
+    ParticleStateIndex[ParticleStateIndex["RELEASED_AT"] = 7] = "RELEASED_AT";
+})(ParticleStateIndex || (ParticleStateIndex = {}));
+export const PARTICLE_STATE_LENGTH = 8;
+/**
+ * Creates one particle per visible pixel, randomly sampled down to maxParticleCount.
+ * Particles are placed at the bottom of an effect canvas of the given height.
+ */
+export function createParticles(imageData, maxParticleCount, effectHeight) {
+    const { width, height, data } = imageData;
+    const candidates = new Uint32Array(width * height);
+    let candidateCount = 0;
+    for (let pixel = 0; pixel < width * height; pixel++) {
+        if (data[pixel * 4 + 3] >= MIN_PARTICLE_ALPHA) {
+            candidates[candidateCount++] = pixel;
+        }
+    }
+    const count = Math.min(candidateCount, maxParticleCount);
+    const sampled = count < candidateCount;
+    if (sampled) {
+        // partial Fisher-Yates: the first count candidates become a random sample
+        for (let i = 0; i < count; i++) {
+            const j = i + ~~(Math.random() * (candidateCount - i));
+            const swap = candidates[i];
+            candidates[i] = candidates[j];
+            candidates[j] = swap;
+        }
+    }
+    const state = new Float32Array(count * PARTICLE_STATE_LENGTH);
+    const colors = new Uint8Array(count * 4);
+    const offsetY = effectHeight - height;
+    let maxParticleX = 0;
+    let minParticleY = effectHeight;
+    for (let i = 0; i < count; i++) {
+        const pixel = candidates[i];
+        const x = pixel % width;
+        const y = ~~(pixel / width);
+        maxParticleX = Math.max(maxParticleX, x);
+        minParticleY = Math.min(minParticleY, y);
+        const base = i * PARTICLE_STATE_LENGTH;
+        state[base + ParticleStateIndex.X] = x;
+        state[base + ParticleStateIndex.Y] = y + offsetY;
+        state[base + ParticleStateIndex.ALPHA] = data[pixel * 4 + 3];
+        colors[i * 4] = data[pixel * 4];
+        colors[i * 4 + 1] = data[pixel * 4 + 1];
+        colors[i * 4 + 2] = data[pixel * 4 + 2];
+        colors[i * 4 + 3] = data[pixel * 4 + 3];
+    }
+    return { count, state, colors, maxParticleX, minParticleY, sampled };
+}
+/** a random sample of at most maxCount particles, e.g. when the CPU takes over from the GPU */
+export function limitParticles(particles, maxCount) {
+    if (particles.count <= maxCount) {
+        return particles;
+    }
+    const indices = new Uint32Array(particles.count);
+    for (let i = 0; i < particles.count; i++) {
+        indices[i] = i;
+    }
+    const state = new Float32Array(maxCount * PARTICLE_STATE_LENGTH);
+    const colors = new Uint8Array(maxCount * 4);
+    for (let i = 0; i < maxCount; i++) {
+        // partial Fisher-Yates over the particle indices
+        const j = i + ~~(Math.random() * (particles.count - i));
+        const picked = indices[j];
+        indices[j] = indices[i];
+        state.set(particles.state.subarray(picked * PARTICLE_STATE_LENGTH, (picked + 1) * PARTICLE_STATE_LENGTH), i * PARTICLE_STATE_LENGTH);
+        colors.set(particles.colors.subarray(picked * 4, picked * 4 + 4), i * 4);
+    }
+    return { ...particles, count: maxCount, state, colors, sampled: true };
+}
+//# sourceMappingURL=particles.js.map

package/esm2022/lib/particles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"particles.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/particles.ts"],"names":[],"mappings":"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","sourcesContent":["/** alpha (0-255) below which a particle counts as invisible */\nexport const MIN_PARTICLE_ALPHA = ~~(255 * 0.01);\n\n/** float layout of one particle in {@link Particles.state} */\nexport enum ParticleStateIndex {\n  X = 0,\n  Y = 1,\n  VX = 2,\n  VY = 3,\n  AX = 4,\n  AY = 5,\n  ALPHA = 6,\n  /** animationT when the particle broke off, 0 while attached, negative while a chunk falls */\n  RELEASED_AT = 7,\n}\n\nexport const PARTICLE_STATE_LENGTH = 8;\n\nexport interface Particles {\n  count: number;\n  /** position, velocity, acceleration, alpha (0-255) and release time per particle */\n  state: Float32Array;\n  /** rgba (0-255) per particle */\n  colors: Uint8Array;\n  /** right most particle x of the captured image, the vaporizing front starts here */\n  maxParticleX: number;\n  /** top most particle y of the captured image */\n  minParticleY: number;\n  /** true when only a random sample of the visible pixels became particles */\n  sampled: boolean;\n}\n\n/**\n * Creates one particle per visible pixel, randomly sampled down to maxParticleCount.\n * Particles are placed at the bottom of an effect canvas of the given height.\n */\nexport function createParticles(\n  imageData: ImageData,\n  maxParticleCount: number,\n  effectHeight: number\n): Particles {\n  const { width, height, data } = imageData;\n\n  const candidates = new Uint32Array(width * height);\n  let candidateCount = 0;\n  for (let pixel = 0; pixel < width * height; pixel++) {\n    if (data[pixel * 4 + 3] >= MIN_PARTICLE_ALPHA) {\n      candidates[candidateCount++] = pixel;\n    }\n  }\n\n  const count = Math.min(candidateCount, maxParticleCount);\n  const sampled = count < candidateCount;\n  if (sampled) {\n    // partial Fisher-Yates: the first count candidates become a random sample\n    for (let i = 0; i < count; i++) {\n      const j = i + ~~(Math.random() * (candidateCount - i));\n      const swap = candidates[i];\n      candidates[i] = candidates[j];\n      candidates[j] = swap;\n    }\n  }\n\n  const state = new Float32Array(count * PARTICLE_STATE_LENGTH);\n  const colors = new Uint8Array(count * 4);\n  const offsetY = effectHeight - height;\n\n  let maxParticleX = 0;\n  let minParticleY = effectHeight;\n  for (let i = 0; i < count; i++) {\n    const pixel = candidates[i];\n    const x = pixel % width;\n    const y = ~~(pixel / width);\n    maxParticleX = Math.max(maxParticleX, x);\n    minParticleY = Math.min(minParticleY, y);\n\n    const base = i * PARTICLE_STATE_LENGTH;\n    state[base + ParticleStateIndex.X] = x;\n    state[base + ParticleStateIndex.Y] = y + offsetY;\n    state[base + ParticleStateIndex.ALPHA] = data[pixel * 4 + 3];\n    colors[i * 4] = data[pixel * 4];\n    colors[i * 4 + 1] = data[pixel * 4 + 1];\n    colors[i * 4 + 2] = data[pixel * 4 + 2];\n    colors[i * 4 + 3] = data[pixel * 4 + 3];\n  }\n  return { count, state, colors, maxParticleX, minParticleY, sampled };\n}\n\n/** a random sample of at most maxCount particles, e.g. when the CPU takes over from the GPU */\nexport function limitParticles(\n  particles: Particles,\n  maxCount: number\n): Particles {\n  if (particles.count <= maxCount) {\n    return particles;\n  }\n  const indices = new Uint32Array(particles.count);\n  for (let i = 0; i < particles.count; i++) {\n    indices[i] = i;\n  }\n  const state = new Float32Array(maxCount * PARTICLE_STATE_LENGTH);\n  const colors = new Uint8Array(maxCount * 4);\n  for (let i = 0; i < maxCount; i++) {\n    // partial Fisher-Yates over the particle indices\n    const j = i + ~~(Math.random() * (particles.count - i));\n    const picked = indices[j];\n    indices[j] = indices[i];\n    state.set(\n      particles.state.subarray(\n        picked * PARTICLE_STATE_LENGTH,\n        (picked + 1) * PARTICLE_STATE_LENGTH\n      ),\n      i * PARTICLE_STATE_LENGTH\n    );\n    colors.set(particles.colors.subarray(picked * 4, picked * 4 + 4), i * 4);\n  }\n  return { ...particles, count: maxCount, state, colors, sampled: true };\n}\n"]}

package/esm2022/lib/snap-sound-envelopes.js

@@ -0,0 +1,38 @@
+/**
+ * Loudness of the snap sound layers over the animation progress (0 to 1).
+ * The element breaks with a rumble, then the wind slowly grows stronger and
+ * carries crackling sand, both get weaker in the last third and fade away.
+ */
+/** part of the animation after which the sound has blown away */
+export const SILENT_AT = 0.85;
+/** part of the animation after which the rumble of the breaking element is over */
+export const RUMBLE_END = 0.33;
+const WIND_PEAK = 0.6;
+function smoothstep(edge0, edge1, x) {
+    const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));
+    return t * t * (3 - 2 * t);
+}
+/** everything fades from the peak of the wind until it is silent */
+function fadeAway(progress, from) {
+    return 1 - smoothstep(from, SILENT_AT, progress);
+}
+/** the element breaks: a loud rumble right at the start that dies away within the first third */
+export function rumbleEnvelope(progress) {
+    if (progress >= RUMBLE_END) {
+        return 0;
+    }
+    const attack = smoothstep(0, 0.004, progress);
+    const decay = Math.exp(-Math.max(0, progress - 0.004) / 0.06);
+    return attack * decay * fadeAway(progress, 0.25);
+}
+/** the wind starts quietly and slowly grows stronger, then fades in the last third */
+export function windEnvelope(progress) {
+    const fadeIn = smoothstep(0, 0.04, progress);
+    const grow = 0.15 + 0.85 * smoothstep(0.02, WIND_PEAK, progress);
+    return fadeIn * grow * fadeAway(progress, WIND_PEAK);
+}
+/** sand crackles as the wind picks it up, gets weaker in the last third and fades */
+export function sandEnvelope(progress) {
+    return smoothstep(0.06, 0.55, progress) * fadeAway(progress, 0.58);
+}
+//# sourceMappingURL=snap-sound-envelopes.js.map

package/esm2022/lib/snap-sound-envelopes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-sound-envelopes.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/snap-sound-envelopes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iEAAiE;AACjE,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;AAE9B,mFAAmF;AACnF,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC;AAE/B,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,SAAS,UAAU,CAAC,KAAa,EAAE,KAAa,EAAE,CAAS;IACzD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7B,CAAC;AAED,oEAAoE;AACpE,SAAS,QAAQ,CAAC,QAAgB,EAAE,IAAY;IAC9C,OAAO,CAAC,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AACnD,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,cAAc,CAAC,QAAgB;IAC7C,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,CAAC,CAAC;IACX,CAAC;IACD,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9D,OAAO,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AACnD,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,YAAY,CAAC,QAAgB;IAC3C,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACjE,OAAO,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AACvD,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,YAAY,CAAC,QAAgB;IAC3C,OAAO,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AACrE,CAAC","sourcesContent":["/**\n * Loudness of the snap sound layers over the animation progress (0 to 1).\n * The element breaks with a rumble, then the wind slowly grows stronger and\n * carries crackling sand, both get weaker in the last third and fade away.\n */\n\n/** part of the animation after which the sound has blown away */\nexport const SILENT_AT = 0.85;\n\n/** part of the animation after which the rumble of the breaking element is over */\nexport const RUMBLE_END = 0.33;\n\nconst WIND_PEAK = 0.6;\n\nfunction smoothstep(edge0: number, edge1: number, x: number): number {\n  const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));\n  return t * t * (3 - 2 * t);\n}\n\n/** everything fades from the peak of the wind until it is silent */\nfunction fadeAway(progress: number, from: number): number {\n  return 1 - smoothstep(from, SILENT_AT, progress);\n}\n\n/** the element breaks: a loud rumble right at the start that dies away within the first third */\nexport function rumbleEnvelope(progress: number): number {\n  if (progress >= RUMBLE_END) {\n    return 0;\n  }\n  const attack = smoothstep(0, 0.004, progress);\n  const decay = Math.exp(-Math.max(0, progress - 0.004) / 0.06);\n  return attack * decay * fadeAway(progress, 0.25);\n}\n\n/** the wind starts quietly and slowly grows stronger, then fades in the last third */\nexport function windEnvelope(progress: number): number {\n  const fadeIn = smoothstep(0, 0.04, progress);\n  const grow = 0.15 + 0.85 * smoothstep(0.02, WIND_PEAK, progress);\n  return fadeIn * grow * fadeAway(progress, WIND_PEAK);\n}\n\n/** sand crackles as the wind picks it up, gets weaker in the last third and fades */\nexport function sandEnvelope(progress: number): number {\n  return smoothstep(0.06, 0.55, progress) * fadeAway(progress, 0.58);\n}\n"]}