@wolsok/thanos 17.0.37 → 18.0.0

package/esm2022/lib/ws-thanos.service.js

@@ -1,247 +1,130 @@
-import { Injectable, inject } from '@angular/core';
+import { DOCUMENT, Injectable, inject } from '@angular/core';
 import { default as html2canvas } from 'html2canvas';
-import { animationFrameScheduler, finalize, from, interval, map, switchMap, takeWhile, tap, timeInterval, } from 'rxjs';
-import { SimplexNoise } from './simplex-noise';
+import { animationFrameScheduler, defer, finalize, from, interval, map, switchMap, takeWhile, tap, timeInterval, } from 'rxjs';
+import { EFFECT_HEIGHT_SCALE, EFFECT_WIDTH_SCALE } from './capture-scale';
+import { chooseParticleRenderer, GpuContextBudget, } from './choose-particle-renderer';
+import { createParticles } from './particles';
+import { SnapSoundService } from './snap-sound.service';
 import { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';
 import * as i0 from "@angular/core";
-const PARTICLE_BYTE_LENGTH = 10;
-const MIN_PARTICLE_ALPHA = ~~(255 * 0.01);
-const HEIGHT_SCALE = 5;
-const WIDTH_SCALE = 2;
-const FLOW_FIELD_RES = 0.05;
+/** a short cross fade hides small differences between capture and element */
+const FULL_COVERAGE_FADE_OUT_MS = 200;
 export class WsThanosService {
     constructor() {
         this.thanosOptions = inject(WS_THANOS_OPTIONS_TOKEN);
-    }
-    static getParticleIndicesForBase(base) {
-        return {
-            x: base,
-            y: base + 1,
-            dx: base + 2,
-            dy: base + 3,
-            ax: base + 4,
-            ay: base + 5,
-            r: base + 6,
-            g: base + 7,
-            b: base + 8,
-            a: base + 9,
-        };
-    }
-    static getColorIndicesForCoord(x, y, width) {
-        const red = y * (width * 4) + x * 4;
-        return { r: red, g: red + 1, b: red + 2, a: red + 3 };
-    }
-    static updateParticles({ seed, noise, particlesData, thanosOptions, animationState, }) {
-        const { deltaTSec, animationT, maxWidth, maxHeight } = animationState;
-        const { particleAcceleration } = thanosOptions;
-        const { particles, maxParticleX, minParticleY } = particlesData;
-        // the time is used to calculate the vaporization front.
-        const time = Math.sin(animationT * (Math.PI / 2)) * 1.1;
-        const startAccelerateX = maxParticleX - time * maxParticleX;
-        const startAccelerateY = time * (maxHeight - minParticleY) + minParticleY;
-        const lengthY = maxHeight - startAccelerateY;
-        const accelerateRadiusPow = startAccelerateX * startAccelerateX + lengthY * lengthY;
-        for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {
-            const { x, y, dx, dy, ax, ay, a } = WsThanosService.getParticleIndicesForBase(i);
-            const particleX = particles[x];
-            const particleY = particles[y];
-            // only update particles that are inside view and visible
-            if (particleX > maxWidth ||
-                particleX < 0 ||
-                particleY > maxHeight ||
-                particleY < 0 ||
-                particles[a] < MIN_PARTICLE_ALPHA) {
-                continue;
-            }
-            if (!(Math.abs(particles[ax]) > 0 || Math.abs(particles[ay]) > 0)) {
-                let pYLength = maxHeight - particleY;
-                let pXLength = particleX;
-                // we calculate some random looking numbers and functions to have nice looking vaporizing front of particles
-                // todo consider to use noise;
-                pXLength += Math.tan((pXLength / 20.12) * time + seed) * 0.5;
-                pXLength += (particleX % deltaTSec) * 0.5;
-                pXLength +=
-                    Math.sin((pXLength / 30 + 723.394) * time + seed * 12.5) * 11;
-                pYLength += Math.tan((pYLength / 0.45) * time + seed * 1.5) * 0.5;
-                pYLength +=
-                    Math.cos((pYLength / 100 + 2323.234) * time + seed * 456.1) * 23;
-                const pLength = pXLength * pXLength + pYLength * pYLength;
-                if (pLength > accelerateRadiusPow) {
-                    particles[ax] = Math.random();
-                    particles[ay] = Math.random() * -1;
-                }
-            }
-            else {
-                // use noise to flow along velocity field
-                const flowFieldAcc = WsThanosService.getXYFromFlowField(noise, seed, particleX, particleY);
-                const accelerationX = flowFieldAcc[0];
-                const accelerationY = flowFieldAcc[1];
-                particles[ax] += accelerationX;
-                particles[ay] += accelerationY;
-            }
-            // * Math.pow(1 + animationT, 4)
-            particles[dx] += particles[ax] * particleAcceleration * deltaTSec;
-            particles[dy] += particles[ay] * particleAcceleration * deltaTSec;
-            particles[x] += particles[dx] * deltaTSec;
-            particles[y] += particles[dy] * deltaTSec;
-            // fade particle out ( very late);
-            particles[a] *= 1 - Math.pow(animationT, 15); // 255 - Math.sqrt(particles[dx] * particles[dx] + particles[dy] * particles[dy]) / 1.2;
-        }
-    }
-    static drawParticles(drawCtx, particles) {
-        const { width, height } = drawCtx.canvas;
-        drawCtx.clearRect(0, 0, width, height);
-        const image = drawCtx.getImageData(0, 0, width, height);
-        const imageData = image.data;
-        for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {
-            const particleX = particles[i];
-            const particleY = particles[i + 1];
-            const pI = WsThanosService.getParticleIndicesForBase(i);
-            if (particleX > width ||
-                particleX < 0 ||
-                particleY > height ||
-                particleY < 0 ||
-                particles[pI.a] < MIN_PARTICLE_ALPHA) {
-                continue;
-            }
-            const { r, g, b, a } = WsThanosService.getColorIndicesForCoord(~~particles[pI.x], ~~particles[pI.y], width);
-            imageData[r] = ~~particles[pI.r];
-            imageData[g] = ~~particles[pI.g];
-            imageData[b] = ~~particles[pI.b];
-            imageData[a] = ~~particles[pI.a];
-        }
-        drawCtx.putImageData(image, 0, 0);
-    }
-    static prepareCanvasForVaporize(divCanvas, maxParticleCount) {
-        const { width, height } = divCanvas;
-        // scale result canvas to have more room to draw particles while vaporizing;
-        const resultHeight = height * HEIGHT_SCALE;
-        const resultWidth = width * WIDTH_SCALE;
-        const resultCanvas = document.createElement('canvas');
-        resultCanvas.height = resultHeight;
-        resultCanvas.width = resultWidth;
-        const imageData = divCanvas
-            .getContext('2d', { willReadFrequently: true })
-            ?.getImageData(0, 0, width, height);
-        if (imageData == null) {
-            throw new Error('Could not get image data from canvas');
-        }
-        const particlesData = WsThanosService.createParticlesForImageData(imageData, maxParticleCount, resultHeight);
-        return { resultCanvas, particlesData };
-    }
-    static createParticlesForImageData(imageData, maxParticleCount, resultHeight) {
-        const { width, height } = imageData;
-        let particleCandidates = 0;
-        let particleCount = 0;
-        const particleCandiatesList = [];
-        for (let y = 0; y < height; y++) {
-            for (let x = 0; x < width; x++) {
-                const { a } = WsThanosService.getColorIndicesForCoord(x, y, width);
-                if (imageData.data[a] >= MIN_PARTICLE_ALPHA) {
-                    particleCandidates++;
-                    particleCandiatesList.push({ x, y });
-                }
-            }
-        }
-        const maxNumParticles = Math.min(particleCandidates, maxParticleCount);
-        const particles = new Float32Array(Float32Array.BYTES_PER_ELEMENT * maxNumParticles * PARTICLE_BYTE_LENGTH);
-        let maxParticleX = 0;
-        let minParticleY = resultHeight;
-        while (particleCount < maxNumParticles) {
-            // select random index from candiates
-            const index = ~~(Math.random() * particleCandiatesList.length);
-            const { x, y } = particleCandiatesList[index];
-            // overwrite index with last element to prevent double selection of particles
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            particleCandiatesList[index] = particleCandiatesList.pop();
-            maxParticleX = Math.max(maxParticleX, x);
-            minParticleY = Math.min(minParticleY, y);
-            const { dx, dy, ax, ay, r, g, b, a, ...xy } = WsThanosService.getParticleIndicesForBase(particleCount * PARTICLE_BYTE_LENGTH);
-            particles[xy.x] = x;
-            particles[xy.y] = y + resultHeight - height;
-            particles[dx] = 0;
-            particles[dy] = 0;
-            particles[ax] = 0;
-            particles[ay] = 0;
-            const indicesImage = WsThanosService.getColorIndicesForCoord(x, y, width);
-            particles[r] = imageData.data[indicesImage.r];
-            particles[g] = imageData.data[indicesImage.g];
-            particles[b] = imageData.data[indicesImage.b];
-            particles[a] = imageData.data[indicesImage.a];
-            particleCount++;
-        }
-        return { particles, maxParticleX, minParticleY };
-    }
-    static getXYFromFlowField(noise, seed, x, y) {
-        const sampleX = noise.scaled3D(x, y, seed + 33.23, FLOW_FIELD_RES);
-        const sampleY = noise.scaled3D(x, seed / 13.23, y, FLOW_FIELD_RES) * -1;
-        return [sampleX, sampleY];
+        this.document = inject(DOCUMENT);
+        this.snapSound = inject(SnapSoundService);
+        /** shared by all effects, browsers only allow a few WebGL contexts */
+        this.gpuBudget = new GpuContextBudget();
     }
     /**
      * start the vaporize-effect.
+     * @param options override the provided options for this element
      */
-    vaporize(elem) {
-        return this.vaporizeIntern(elem);
+    vaporize(elem, options) {
+        // nothing is prepared before someone subscribes
+        return defer(() => this.vaporizeIntern(elem, { ...this.thanosOptions, ...options }));
     }
-    vaporizeIntern(elem) {
+    vaporizeIntern(elem, options) {
+        const { animationLength, maxParticleCount, particleAcceleration, crumble } = options;
+        const window = this.document.defaultView;
         elem.style.opacity = elem.style.opacity || '1';
-        elem.style.transition = `opacity ${Math.floor(this.thanosOptions.animationLength * 0.8)}ms ease-out`;
-        const noise = new SimplexNoise({ frequency: 0.01, min: 0 });
-        const seed = new Date().getTime() * Math.random();
+        const rendererChoice = chooseParticleRenderer({
+            maxParticleCount,
+            devicePixelRatio: window?.devicePixelRatio ?? 1,
+            createCanvas: () => this.document.createElement('canvas'),
+            gpuBudget: this.gpuBudget,
+        });
+        const { width, height } = elem.getBoundingClientRect();
+        const scale = rendererChoice.captureScale(width, height);
+        const seed = Math.random() * 1000;
+        let effect;
         const html2CanvasPromise = html2canvas(elem, {
             backgroundColor: null,
-            scale: 1,
+            scale,
             allowTaint: true,
-            windowHeight: window.innerHeight,
-            windowWidth: window.innerWidth,
-            scrollY: -window.scrollY,
+            windowHeight: window?.innerHeight,
+            windowWidth: window?.innerWidth,
+            scrollY: -(window?.scrollY ?? 0),
         });
-        return from(html2CanvasPromise).pipe(map((canvasFromHtmlElem) => {
-            const canvasAndParticles = WsThanosService.prepareCanvasForVaporize(canvasFromHtmlElem, this.thanosOptions.maxParticleCount);
-            const { resultCanvas } = canvasAndParticles;
-            if (elem.parentElement) {
-                elem.parentElement.style.position =
-                    elem.parentElement.style.position || 'relative';
+        return from(html2CanvasPromise).pipe(map((capturedElem) => {
+            const effectWidth = capturedElem.width * EFFECT_WIDTH_SCALE;
+            const effectHeight = capturedElem.height * EFFECT_HEIGHT_SCALE;
+            const imageData = capturedElem
+                .getContext('2d', { willReadFrequently: true })
+                ?.getImageData(0, 0, capturedElem.width, capturedElem.height);
+            if (imageData == null) {
+                throw new Error('Could not get image data from canvas');
             }
-            resultCanvas.style.position = 'absolute';
-            resultCanvas.style.left = 0 + 'px';
-            resultCanvas.style.top =
-                '-' + elem.getBoundingClientRect().height * (HEIGHT_SCALE - 1) + 'px';
-            resultCanvas.style.zIndex = '2000';
-            resultCanvas.style.pointerEvents = 'none';
-            elem.insertAdjacentElement('beforebegin', resultCanvas);
-            // this should start the transition above defined
+            const particles = createParticles(imageData, rendererChoice.maxParticleCount, effectHeight);
+            const renderer = rendererChoice.create(particles, {
+                width: effectWidth,
+                height: effectHeight,
+                // particles move in device pixels, keep their speed in css pixels
+                particleAcceleration: particleAcceleration * scale,
+                pixelScale: scale,
+                crumble,
+                seed,
+            });
+            this.placeEffectCanvas(elem, renderer.canvas, width, height);
+            renderer.canvas.dataset['wsThanosRenderer'] = renderer.kind;
+            renderer.canvas.dataset['wsThanosCrumble'] = renderer.crumble;
+            // when every pixel became a particle, the particles replace the element right away
+            const fadeOutMs = particles.sampled
+                ? Math.floor(animationLength * 0.8)
+                : FULL_COVERAGE_FADE_OUT_MS;
+            elem.style.transition = `opacity ${fadeOutMs}ms ease-out`;
             elem.style.opacity = '0';
-            return canvasAndParticles;
-        }), switchMap(({ resultCanvas, particlesData }) => {
+            const { sound, soundVolume } = options;
+            effect = {
+                renderer,
+                sound: sound
+                    ? this.snapSound.play(animationLength, soundVolume, renderer.crumble)
+                    : undefined,
+            };
+            return effect;
+        }), switchMap(({ renderer, sound }) => {
             let time = 0;
-            const { animationLength, maxParticleCount, particleAcceleration } = this.thanosOptions;
             return interval(1000 / 60, animationFrameScheduler).pipe(timeInterval(), tap((deltaT) => (time += deltaT.interval)), map((deltaT) => ({
                 deltaTSec: deltaT.interval / 1000,
                 animationT: time / animationLength,
-                maxWidth: resultCanvas.width,
-                maxHeight: resultCanvas.height,
-            })), tap((animationState) => {
-                WsThanosService.updateParticles({
-                    particlesData,
-                    animationState,
-                    thanosOptions: {
-                        animationLength,
-                        maxParticleCount,
-                        particleAcceleration,
-                    },
-                    noise,
-                    seed,
-                });
-                const context = resultCanvas.getContext('2d', {
-                    willReadFrequently: true,
-                });
-                if (context) {
-                    WsThanosService.drawParticles(context, particlesData.particles);
-                }
-            }), takeWhile((animationState) => animationState.animationT <= 1), finalize(() => resultCanvas.remove()));
+                maxWidth: renderer.canvas.width,
+                maxHeight: renderer.canvas.height,
+            })), tap((animationState) => renderer.render(animationState)), takeWhile((animationState) => animationState.animationT <= 1), 
+            // a completed effect lets the sound blow away, a cancelled one stops it
+            tap({ unsubscribe: () => sound?.stop(), error: () => sound?.stop() }));
+        }), finalize(() => {
+            effect?.renderer.dispose();
+            rendererChoice.release();
         }));
     }
+    /** the element sits at the bottom left of the larger effect canvas */
+    placeEffectCanvas(elem, canvas, width, height) {
+        const { left, top } = this.offsetInParent(elem);
+        canvas.style.position = 'absolute';
+        canvas.style.left = `${left}px`;
+        canvas.style.top = `${top - height * (EFFECT_HEIGHT_SCALE - 1)}px`;
+        canvas.style.width = `${width * EFFECT_WIDTH_SCALE}px`;
+        canvas.style.height = `${height * EFFECT_HEIGHT_SCALE}px`;
+        canvas.style.zIndex = '2000';
+        canvas.style.pointerEvents = 'none';
+        elem.insertAdjacentElement('beforebegin', canvas);
+    }
+    /** position of the element inside its parent, where absolute children are placed */
+    offsetInParent(elem) {
+        const parent = elem.parentElement;
+        if (parent == null) {
+            return { left: 0, top: 0 };
+        }
+        parent.style.position = parent.style.position || 'relative';
+        // absolute positions are relative to the parent's padding box
+        const elemRect = elem.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        return {
+            left: elemRect.left - parentRect.left - parent.clientLeft + parent.scrollLeft,
+            top: elemRect.top - parentRect.top - parent.clientTop + parent.scrollTop,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: WsThanosService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: WsThanosService, providedIn: 'root' }); }
 }

package/esm2022/lib/ws-thanos.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"ws-thanos.service.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/ws-thanos.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, inject } from '@angular/core';\n\nimport { default as html2canvas } from 'html2canvas';\nimport {\n  animationFrameScheduler,\n  finalize,\n  from,\n  interval,\n  map,\n  Observable,\n  switchMap,\n  takeWhile,\n  tap,\n  timeInterval,\n} from 'rxjs';\nimport { AnimationState } from './animation.state';\nimport { SimplexNoise } from './simplex-noise';\nimport { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';\nimport type { WsThanosOptions } from './ws-thanos.options';\n\nconst PARTICLE_BYTE_LENGTH = 10;\nconst MIN_PARTICLE_ALPHA = ~~(255 * 0.01);\nconst HEIGHT_SCALE = 5;\nconst WIDTH_SCALE = 2;\nconst FLOW_FIELD_RES = 0.05;\n\ninterface ParticlesData {\n  particles: Float32Array;\n  maxParticleX: number;\n  minParticleY: number;\n}\n\ninterface UpdateParticleParams {\n  particlesData: ParticlesData;\n  animationState: AnimationState;\n  thanosOptions: WsThanosOptions;\n  noise: SimplexNoise;\n  seed: number;\n}\n\ninterface ParticleIndices {\n  x: number;\n  y: number;\n  dx: number;\n  dy: number;\n  ax: number;\n  ay: number;\n  r: number;\n  g: number;\n  b: number;\n  a: number;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class WsThanosService {\n  private readonly thanosOptions: WsThanosOptions = inject(\n    WS_THANOS_OPTIONS_TOKEN\n  );\n\n  private static getParticleIndicesForBase(base: number): ParticleIndices {\n    return {\n      x: base,\n      y: base + 1,\n      dx: base + 2,\n      dy: base + 3,\n      ax: base + 4,\n      ay: base + 5,\n      r: base + 6,\n      g: base + 7,\n      b: base + 8,\n      a: base + 9,\n    };\n  }\n\n  private static getColorIndicesForCoord(\n    x: number,\n    y: number,\n    width: number\n  ): { a: number; r: number; b: number; g: number } {\n    const red = y * (width * 4) + x * 4;\n    return { r: red, g: red + 1, b: red + 2, a: red + 3 };\n  }\n\n  private static updateParticles({\n    seed,\n    noise,\n    particlesData,\n    thanosOptions,\n    animationState,\n  }: UpdateParticleParams): void {\n    const { deltaTSec, animationT, maxWidth, maxHeight } = animationState;\n    const { particleAcceleration } = thanosOptions;\n    const { particles, maxParticleX, minParticleY } = particlesData;\n\n    // the time is used to calculate the vaporization front.\n    const time = Math.sin(animationT * (Math.PI / 2)) * 1.1;\n\n    const startAccelerateX = maxParticleX - time * maxParticleX;\n    const startAccelerateY = time * (maxHeight - minParticleY) + minParticleY;\n\n    const lengthY = maxHeight - startAccelerateY;\n    const accelerateRadiusPow =\n      startAccelerateX * startAccelerateX + lengthY * lengthY;\n\n    for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {\n      const { x, y, dx, dy, ax, ay, a } =\n        WsThanosService.getParticleIndicesForBase(i);\n      const particleX = particles[x];\n      const particleY = particles[y];\n\n      // only update particles that are inside view and visible\n      if (\n        particleX > maxWidth ||\n        particleX < 0 ||\n        particleY > maxHeight ||\n        particleY < 0 ||\n        particles[a] < MIN_PARTICLE_ALPHA\n      ) {\n        continue;\n      }\n\n      if (!(Math.abs(particles[ax]) > 0 || Math.abs(particles[ay]) > 0)) {\n        let pYLength = maxHeight - particleY;\n        let pXLength = particleX;\n\n        // we calculate some random looking numbers and functions to have nice looking vaporizing front of particles\n        // todo consider to use noise;\n        pXLength += Math.tan((pXLength / 20.12) * time + seed) * 0.5;\n        pXLength += (particleX % deltaTSec) * 0.5;\n        pXLength +=\n          Math.sin((pXLength / 30 + 723.394) * time + seed * 12.5) * 11;\n        pYLength += Math.tan((pYLength / 0.45) * time + seed * 1.5) * 0.5;\n        pYLength +=\n          Math.cos((pYLength / 100 + 2323.234) * time + seed * 456.1) * 23;\n\n        const pLength = pXLength * pXLength + pYLength * pYLength;\n        if (pLength > accelerateRadiusPow) {\n          particles[ax] = Math.random();\n          particles[ay] = Math.random() * -1;\n        }\n      } else {\n        // use noise to flow along velocity field\n        const flowFieldAcc = WsThanosService.getXYFromFlowField(\n          noise,\n          seed,\n          particleX,\n          particleY\n        );\n        const accelerationX = flowFieldAcc[0];\n        const accelerationY = flowFieldAcc[1];\n        particles[ax] += accelerationX;\n        particles[ay] += accelerationY;\n      }\n\n      // * Math.pow(1 + animationT, 4)\n      particles[dx] += particles[ax] * particleAcceleration * deltaTSec;\n      particles[dy] += particles[ay] * particleAcceleration * deltaTSec;\n      particles[x] += particles[dx] * deltaTSec;\n      particles[y] += particles[dy] * deltaTSec;\n      // fade particle out ( very late);\n      particles[a] *= 1 - Math.pow(animationT, 15); // 255 - Math.sqrt(particles[dx] * particles[dx] + particles[dy] * particles[dy]) / 1.2;\n    }\n  }\n\n  private static drawParticles(\n    drawCtx: CanvasRenderingContext2D,\n    particles: Float32Array\n  ): void {\n    const { width, height } = drawCtx.canvas;\n    drawCtx.clearRect(0, 0, width, height);\n    const image = drawCtx.getImageData(0, 0, width, height);\n    const imageData = image.data;\n    for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {\n      const particleX = particles[i];\n      const particleY = particles[i + 1];\n      const pI = WsThanosService.getParticleIndicesForBase(i);\n      if (\n        particleX > width ||\n        particleX < 0 ||\n        particleY > height ||\n        particleY < 0 ||\n        particles[pI.a] < MIN_PARTICLE_ALPHA\n      ) {\n        continue;\n      }\n      const { r, g, b, a } = WsThanosService.getColorIndicesForCoord(\n        ~~particles[pI.x],\n        ~~particles[pI.y],\n        width\n      );\n      imageData[r] = ~~particles[pI.r];\n      imageData[g] = ~~particles[pI.g];\n      imageData[b] = ~~particles[pI.b];\n      imageData[a] = ~~particles[pI.a];\n    }\n    drawCtx.putImageData(image, 0, 0);\n  }\n\n  private static prepareCanvasForVaporize(\n    divCanvas: HTMLCanvasElement,\n    maxParticleCount: number\n  ): {\n    particlesData: ParticlesData;\n    resultCanvas: HTMLCanvasElement;\n  } {\n    const { width, height } = divCanvas;\n\n    // scale result canvas to have more room to draw particles while vaporizing;\n    const resultHeight = height * HEIGHT_SCALE;\n    const resultWidth = width * WIDTH_SCALE;\n    const resultCanvas: HTMLCanvasElement = document.createElement('canvas');\n    resultCanvas.height = resultHeight;\n    resultCanvas.width = resultWidth;\n\n    const imageData = divCanvas\n      .getContext('2d', { willReadFrequently: true })\n      ?.getImageData(0, 0, width, height);\n    if (imageData == null) {\n      throw new Error('Could not get image data from canvas');\n    }\n    const particlesData = WsThanosService.createParticlesForImageData(\n      imageData,\n      maxParticleCount,\n      resultHeight\n    );\n    return { resultCanvas, particlesData };\n  }\n\n  private static createParticlesForImageData(\n    imageData: ImageData,\n    maxParticleCount: number,\n    resultHeight: number\n  ): { minParticleY: number; maxParticleX: number; particles: Float32Array } {\n    const { width, height } = imageData;\n    let particleCandidates = 0;\n    let particleCount = 0;\n\n    const particleCandiatesList: { x: number; y: number }[] = [];\n    for (let y = 0; y < height; y++) {\n      for (let x = 0; x < width; x++) {\n        const { a } = WsThanosService.getColorIndicesForCoord(x, y, width);\n        if (imageData.data[a] >= MIN_PARTICLE_ALPHA) {\n          particleCandidates++;\n          particleCandiatesList.push({ x, y });\n        }\n      }\n    }\n\n    const maxNumParticles = Math.min(particleCandidates, maxParticleCount);\n    const particles = new Float32Array(\n      Float32Array.BYTES_PER_ELEMENT * maxNumParticles * PARTICLE_BYTE_LENGTH\n    );\n\n    let maxParticleX = 0;\n    let minParticleY = resultHeight;\n    while (particleCount < maxNumParticles) {\n      // select random index from candiates\n      const index = ~~(Math.random() * particleCandiatesList.length);\n      const { x, y } = particleCandiatesList[index];\n\n      // overwrite index with last element to prevent double selection of particles\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      particleCandiatesList[index] = particleCandiatesList.pop()!;\n\n      maxParticleX = Math.max(maxParticleX, x);\n      minParticleY = Math.min(minParticleY, y);\n      const { dx, dy, ax, ay, r, g, b, a, ...xy } =\n        WsThanosService.getParticleIndicesForBase(\n          particleCount * PARTICLE_BYTE_LENGTH\n        );\n      particles[xy.x] = x;\n      particles[xy.y] = y + resultHeight - height;\n      particles[dx] = 0;\n      particles[dy] = 0;\n      particles[ax] = 0;\n      particles[ay] = 0;\n\n      const indicesImage = WsThanosService.getColorIndicesForCoord(x, y, width);\n\n      particles[r] = imageData.data[indicesImage.r];\n      particles[g] = imageData.data[indicesImage.g];\n      particles[b] = imageData.data[indicesImage.b];\n      particles[a] = imageData.data[indicesImage.a];\n      particleCount++;\n    }\n    return { particles, maxParticleX, minParticleY };\n  }\n\n  private static getXYFromFlowField(\n    noise: SimplexNoise,\n    seed: number,\n    x: number,\n    y: number\n  ) {\n    const sampleX = noise.scaled3D(x, y, seed + 33.23, FLOW_FIELD_RES);\n    const sampleY = noise.scaled3D(x, seed / 13.23, y, FLOW_FIELD_RES) * -1;\n    return [sampleX, sampleY];\n  }\n\n  /**\n   * start the vaporize-effect.\n   */\n  vaporize(elem: HTMLElement): Observable<AnimationState> {\n    return this.vaporizeIntern(elem);\n  }\n\n  private vaporizeIntern(elem: HTMLElement): Observable<AnimationState> {\n    elem.style.opacity = elem.style.opacity || '1';\n    elem.style.transition = `opacity ${Math.floor(\n      this.thanosOptions.animationLength * 0.8\n    )}ms ease-out`;\n    const noise = new SimplexNoise({ frequency: 0.01, min: 0 });\n    const seed = new Date().getTime() * Math.random();\n    const html2CanvasPromise: Promise<HTMLCanvasElement> = html2canvas(elem, {\n      backgroundColor: null,\n      scale: 1,\n      allowTaint: true,\n      windowHeight: window.innerHeight,\n      windowWidth: window.innerWidth,\n      scrollY: -window.scrollY,\n    });\n\n    return from(html2CanvasPromise).pipe(\n      map((canvasFromHtmlElem) => {\n        const canvasAndParticles = WsThanosService.prepareCanvasForVaporize(\n          canvasFromHtmlElem,\n          this.thanosOptions.maxParticleCount\n        );\n        const { resultCanvas } = canvasAndParticles;\n        if (elem.parentElement) {\n          elem.parentElement.style.position =\n            elem.parentElement.style.position || 'relative';\n        }\n        resultCanvas.style.position = 'absolute';\n        resultCanvas.style.left = 0 + 'px';\n        resultCanvas.style.top =\n          '-' + elem.getBoundingClientRect().height * (HEIGHT_SCALE - 1) + 'px';\n        resultCanvas.style.zIndex = '2000';\n        resultCanvas.style.pointerEvents = 'none';\n\n        elem.insertAdjacentElement('beforebegin', resultCanvas);\n        // this should start the transition above defined\n        elem.style.opacity = '0';\n        return canvasAndParticles;\n      }),\n      switchMap(({ resultCanvas, particlesData }) => {\n        let time = 0;\n        const { animationLength, maxParticleCount, particleAcceleration } =\n          this.thanosOptions;\n        return interval(1000 / 60, animationFrameScheduler).pipe(\n          timeInterval(),\n          tap((deltaT) => (time += deltaT.interval)),\n          map(\n            (deltaT) =>\n              ({\n                deltaTSec: deltaT.interval / 1000,\n                animationT: time / animationLength,\n                maxWidth: resultCanvas.width,\n                maxHeight: resultCanvas.height,\n              }) as AnimationState\n          ),\n          tap((animationState) => {\n            WsThanosService.updateParticles({\n              particlesData,\n              animationState,\n              thanosOptions: {\n                animationLength,\n                maxParticleCount,\n                particleAcceleration,\n              },\n              noise,\n              seed,\n            });\n            const context = resultCanvas.getContext('2d', {\n              willReadFrequently: true,\n            });\n            if (context) {\n              WsThanosService.drawParticles(context, particlesData.particles);\n            }\n          }),\n          takeWhile((animationState) => animationState.animationT <= 1),\n          finalize(() => resultCanvas.remove())\n        );\n      })\n    );\n  }\n}\n"]}
+{"version":3,"file":"ws-thanos.service.js","sourceRoot":"","sources":["../../../../../../libs/public/ws-thanos/src/lib/ws-thanos.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { DOCUMENT, Injectable, inject } from '@angular/core';\n\nimport { default as html2canvas } from 'html2canvas';\nimport {\n  animationFrameScheduler,\n  defer,\n  finalize,\n  from,\n  interval,\n  map,\n  Observable,\n  switchMap,\n  takeWhile,\n  tap,\n  timeInterval,\n} from 'rxjs';\nimport { AnimationState } from './animation.state';\nimport { EFFECT_HEIGHT_SCALE, EFFECT_WIDTH_SCALE } from './capture-scale';\nimport {\n  chooseParticleRenderer,\n  GpuContextBudget,\n} from './choose-particle-renderer';\nimport { ParticleRenderer } from './particle-renderer';\nimport { createParticles } from './particles';\nimport { SnapSound, SnapSoundService } from './snap-sound.service';\nimport { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';\nimport type { WsThanosOptions } from './ws-thanos.options';\n\n/** a short cross fade hides small differences between capture and element */\nconst FULL_COVERAGE_FADE_OUT_MS = 200;\n\ninterface RunningEffect {\n  renderer: ParticleRenderer;\n  sound?: SnapSound;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class WsThanosService {\n  private readonly thanosOptions: WsThanosOptions = inject(\n    WS_THANOS_OPTIONS_TOKEN\n  );\n  private readonly document = inject(DOCUMENT);\n  private readonly snapSound = inject(SnapSoundService);\n  /** shared by all effects, browsers only allow a few WebGL contexts */\n  private readonly gpuBudget = new GpuContextBudget();\n\n  /**\n   * start the vaporize-effect.\n   * @param options override the provided options for this element\n   */\n  public vaporize(\n    elem: HTMLElement,\n    options?: Partial<WsThanosOptions>\n  ): Observable<AnimationState> {\n    // nothing is prepared before someone subscribes\n    return defer(() =>\n      this.vaporizeIntern(elem, { ...this.thanosOptions, ...options })\n    );\n  }\n\n  private vaporizeIntern(\n    elem: HTMLElement,\n    options: WsThanosOptions\n  ): Observable<AnimationState> {\n    const { animationLength, maxParticleCount, particleAcceleration, crumble } =\n      options;\n    const window = this.document.defaultView;\n\n    elem.style.opacity = elem.style.opacity || '1';\n\n    const rendererChoice = chooseParticleRenderer({\n      maxParticleCount,\n      devicePixelRatio: window?.devicePixelRatio ?? 1,\n      createCanvas: () => this.document.createElement('canvas'),\n      gpuBudget: this.gpuBudget,\n    });\n    const { width, height } = elem.getBoundingClientRect();\n    const scale = rendererChoice.captureScale(width, height);\n    const seed = Math.random() * 1000;\n    let effect: RunningEffect | undefined;\n\n    const html2CanvasPromise: Promise<HTMLCanvasElement> = html2canvas(elem, {\n      backgroundColor: null,\n      scale,\n      allowTaint: true,\n      windowHeight: window?.innerHeight,\n      windowWidth: window?.innerWidth,\n      scrollY: -(window?.scrollY ?? 0),\n    });\n\n    return from(html2CanvasPromise).pipe(\n      map((capturedElem): RunningEffect => {\n        const effectWidth = capturedElem.width * EFFECT_WIDTH_SCALE;\n        const effectHeight = capturedElem.height * EFFECT_HEIGHT_SCALE;\n        const imageData = capturedElem\n          .getContext('2d', { willReadFrequently: true })\n          ?.getImageData(0, 0, capturedElem.width, capturedElem.height);\n        if (imageData == null) {\n          throw new Error('Could not get image data from canvas');\n        }\n\n        const particles = createParticles(\n          imageData,\n          rendererChoice.maxParticleCount,\n          effectHeight\n        );\n        const renderer = rendererChoice.create(particles, {\n          width: effectWidth,\n          height: effectHeight,\n          // particles move in device pixels, keep their speed in css pixels\n          particleAcceleration: particleAcceleration * scale,\n          pixelScale: scale,\n          crumble,\n          seed,\n        });\n\n        this.placeEffectCanvas(elem, renderer.canvas, width, height);\n        renderer.canvas.dataset['wsThanosRenderer'] = renderer.kind;\n        renderer.canvas.dataset['wsThanosCrumble'] = renderer.crumble;\n        // when every pixel became a particle, the particles replace the element right away\n        const fadeOutMs = particles.sampled\n          ? Math.floor(animationLength * 0.8)\n          : FULL_COVERAGE_FADE_OUT_MS;\n        elem.style.transition = `opacity ${fadeOutMs}ms ease-out`;\n        elem.style.opacity = '0';\n\n        const { sound, soundVolume } = options;\n        effect = {\n          renderer,\n          sound: sound\n            ? this.snapSound.play(\n                animationLength,\n                soundVolume,\n                renderer.crumble\n              )\n            : undefined,\n        };\n        return effect;\n      }),\n      switchMap(({ renderer, sound }) => {\n        let time = 0;\n        return interval(1000 / 60, animationFrameScheduler).pipe(\n          timeInterval(),\n          tap((deltaT) => (time += deltaT.interval)),\n          map((deltaT): AnimationState => ({\n            deltaTSec: deltaT.interval / 1000,\n            animationT: time / animationLength,\n            maxWidth: renderer.canvas.width,\n            maxHeight: renderer.canvas.height,\n          })),\n          tap((animationState) => renderer.render(animationState)),\n          takeWhile((animationState) => animationState.animationT <= 1),\n          // a completed effect lets the sound blow away, a cancelled one stops it\n          tap({ unsubscribe: () => sound?.stop(), error: () => sound?.stop() })\n        );\n      }),\n      finalize(() => {\n        effect?.renderer.dispose();\n        rendererChoice.release();\n      })\n    );\n  }\n\n  /** the element sits at the bottom left of the larger effect canvas */\n  private placeEffectCanvas(\n    elem: HTMLElement,\n    canvas: HTMLCanvasElement,\n    width: number,\n    height: number\n  ): void {\n    const { left, top } = this.offsetInParent(elem);\n    canvas.style.position = 'absolute';\n    canvas.style.left = `${left}px`;\n    canvas.style.top = `${top - height * (EFFECT_HEIGHT_SCALE - 1)}px`;\n    canvas.style.width = `${width * EFFECT_WIDTH_SCALE}px`;\n    canvas.style.height = `${height * EFFECT_HEIGHT_SCALE}px`;\n    canvas.style.zIndex = '2000';\n    canvas.style.pointerEvents = 'none';\n    elem.insertAdjacentElement('beforebegin', canvas);\n  }\n\n  /** position of the element inside its parent, where absolute children are placed */\n  private offsetInParent(elem: HTMLElement): { left: number; top: number } {\n    const parent = elem.parentElement;\n    if (parent == null) {\n      return { left: 0, top: 0 };\n    }\n    parent.style.position = parent.style.position || 'relative';\n    // absolute positions are relative to the parent's padding box\n    const elemRect = elem.getBoundingClientRect();\n    const parentRect = parent.getBoundingClientRect();\n    return {\n      left:\n        elemRect.left - parentRect.left - parent.clientLeft + parent.scrollLeft,\n      top: elemRect.top - parentRect.top - parent.clientTop + parent.scrollTop,\n    };\n  }\n}\n"]}

package/lib/canvas-particle-renderer.d.ts

@@ -0,0 +1,29 @@
+import { AnimationState } from './animation.state';
+import { ParticleRenderer, ParticleRendererParams } from './particle-renderer';
+import { Particles } from './particles';
+import { SimplexNoise } from './simplex-noise';
+/** the CPU can't keep up with more particles than this */
+export declare const CANVAS_MAX_PARTICLE_COUNT = 400000;
+export interface UpdateParticlesParams {
+    particles: Particles;
+    animationState: AnimationState;
+    particleAcceleration: number;
+    noise: SimplexNoise;
+    seed: number;
+}
+/** Fallback renderer that simulates on the CPU and draws with a 2d context. */
+export declare class CanvasParticleRenderer implements ParticleRenderer {
+    readonly canvas: HTMLCanvasElement;
+    private readonly particles;
+    private readonly params;
+    readonly kind = "canvas";
+    /** the CPU can't afford to simulate cracks and shards */
+    readonly crumble = "dust";
+    private readonly noise;
+    private readonly context;
+    constructor(canvas: HTMLCanvasElement, particles: Particles, params: ParticleRendererParams);
+    render(animationState: AnimationState): void;
+    dispose(): void;
+}
+export declare function updateParticlesOnCpu({ particles: { state, count, maxParticleX, minParticleY }, animationState: { deltaTSec, animationT, maxWidth, maxHeight }, particleAcceleration, noise, seed, }: UpdateParticlesParams): void;
+export declare function drawParticlesOnCpu(context: CanvasRenderingContext2D, { state, colors, count }: Particles): void;

package/lib/capture-scale.d.ts

@@ -0,0 +1,14 @@
+/** the effect canvas is wider and taller than the element so particles have room to fly */
+export declare const EFFECT_WIDTH_SCALE = 2;
+export declare const EFFECT_HEIGHT_SCALE = 5;
+export interface CaptureScaleParams {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+    maxCanvasSize: number;
+}
+/**
+ * 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 declare function computeCaptureScale({ width, height, devicePixelRatio, maxCanvasSize, }: CaptureScaleParams): number;

package/lib/choose-particle-renderer.d.ts

@@ -0,0 +1,31 @@
+import { ParticleRenderer, ParticleRendererParams } from './particle-renderer';
+import { Particles } from './particles';
+/** counts the effects that hold a WebGL context */
+export declare class GpuContextBudget {
+    private readonly max;
+    private live;
+    constructor(max?: number);
+    tryAcquire(): boolean;
+    release(): void;
+}
+export interface ChooseParticleRendererParams {
+    maxParticleCount: number;
+    devicePixelRatio: number;
+    createCanvas: () => HTMLCanvasElement;
+    gpuBudget?: GpuContextBudget;
+}
+export interface ParticleRendererChoice {
+    /** how many particles this renderer can handle */
+    readonly maxParticleCount: number;
+    /** scale to capture an element of the given css size */
+    captureScale(width: number, height: number): number;
+    create(particles: Particles, params: ParticleRendererParams): ParticleRenderer;
+    /** free the reserved GPU context, call it once the effect is over */
+    release(): void;
+}
+/**
+ * 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 declare function chooseParticleRenderer({ maxParticleCount, devicePixelRatio, createCanvas, gpuBudget, }: ChooseParticleRendererParams): ParticleRendererChoice;

package/lib/crumble-shape.d.ts

@@ -0,0 +1,11 @@
+import type { WsThanosCrumble } from './ws-thanos.options';
+export interface CrumbleShape {
+    /** half width of the coarse cracks in css pixels, particles closer to a crack break off */
+    coarseCrack: number;
+    /** half width of the fine cracks in css pixels */
+    fineCrack: number;
+    /** 0 to 1, how far the shards have shifted and tilted */
+    shardGrow: number;
+}
+/** cracks get wider and finer cracks appear while the element decays */
+export declare function crumbleShape(crumble: WsThanosCrumble, animationT: number): CrumbleShape;

package/lib/particle-renderer.d.ts

@@ -0,0 +1,26 @@
+import { AnimationState } from './animation.state';
+import { WsThanosCrumble } from './ws-thanos.options';
+/** moves and draws the particles of one vaporizing element */
+export interface ParticleRenderer {
+    /** where the simulation runs */
+    readonly kind: 'webgl' | 'canvas';
+    /** the effect canvas, positioned by the caller */
+    readonly canvas: HTMLCanvasElement;
+    /** how this renderer breaks the element apart */
+    readonly crumble: WsThanosCrumble;
+    /** advance the simulation by one frame and draw it */
+    render(animationState: AnimationState): void;
+    /** free all resources, the canvas is not usable afterwards */
+    dispose(): void;
+}
+export interface ParticleRendererParams {
+    /** effect canvas size in device pixels */
+    width: number;
+    height: number;
+    particleAcceleration: number;
+    /** device pixels per css pixel */
+    pixelScale: number;
+    crumble: WsThanosCrumble;
+    /** random seed that makes every snap look different */
+    seed: number;
+}

package/lib/particles.d.ts

@@ -0,0 +1,35 @@
+/** alpha (0-255) below which a particle counts as invisible */
+export declare const MIN_PARTICLE_ALPHA: number;
+/** float layout of one particle in {@link Particles.state} */
+export declare enum ParticleStateIndex {
+    X = 0,
+    Y = 1,
+    VX = 2,
+    VY = 3,
+    AX = 4,
+    AY = 5,
+    ALPHA = 6,
+    /** animationT when the particle broke off, 0 while attached, negative while a chunk falls */
+    RELEASED_AT = 7
+}
+export declare const PARTICLE_STATE_LENGTH = 8;
+export interface Particles {
+    count: number;
+    /** position, velocity, acceleration, alpha (0-255) and release time per particle */
+    state: Float32Array;
+    /** rgba (0-255) per particle */
+    colors: Uint8Array;
+    /** right most particle x of the captured image, the vaporizing front starts here */
+    maxParticleX: number;
+    /** top most particle y of the captured image */
+    minParticleY: number;
+    /** true when only a random sample of the visible pixels became particles */
+    sampled: boolean;
+}
+/**
+ * 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 declare function createParticles(imageData: ImageData, maxParticleCount: number, effectHeight: number): Particles;
+/** a random sample of at most maxCount particles, e.g. when the CPU takes over from the GPU */
+export declare function limitParticles(particles: Particles, maxCount: number): Particles;

package/lib/snap-sound-envelopes.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare const SILENT_AT = 0.85;
+/** part of the animation after which the rumble of the breaking element is over */
+export declare const RUMBLE_END = 0.33;
+/** the element breaks: a loud rumble right at the start that dies away within the first third */
+export declare function rumbleEnvelope(progress: number): number;
+/** the wind starts quietly and slowly grows stronger, then fades in the last third */
+export declare function windEnvelope(progress: number): number;
+/** sand crackles as the wind picks it up, gets weaker in the last third and fades */
+export declare function sandEnvelope(progress: number): number;

package/lib/snap-sound.service.d.ts

@@ -0,0 +1,27 @@
+import type { WsThanosCrumble } from './ws-thanos.options';
+import * as i0 from "@angular/core";
+/** a playing snap sound */
+export interface SnapSound {
+    /** fade out quickly and free the sound */
+    stop(): void;
+}
+/**
+ * Generates the snap sound with Web Audio, no audio files needed:
+ * the element breaks with a crunch, a rumble and cracks (dust only crackles thinly),
+ * then a gusty wind slowly grows stronger and carries hissing, crackling sand,
+ * all fading away in the last third.
+ * Every snap sounds a bit different.
+ */
+export declare class SnapSoundService {
+    private readonly window;
+    private audio?;
+    /**
+     * Play the snap sound. Stays silent when the browser does not allow audio yet,
+     * e.g. before the user interacted with the page.
+     */
+    play(durationMs: number, volume: number, crumble: WsThanosCrumble): SnapSound;
+    /** one audio context with a limiter and noise, shared by all snaps */
+    private getAudio;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnapSoundService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}