@wolsok/thanos 17.0.37 → 18.0.0

package/lib/vaporizing-front.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The vaporizing front sweeps from the top right to the bottom left of the element.
+ * Shared by the CPU and the GPU simulation, the GPU gets the values below as uniforms
+ * and the constants interpolated into its shader.
+ */
+/** some random looking waves give the front a frayed edge */
+export declare const FRONT_FRAY: {
+    readonly xWave: 30;
+    readonly xPhase: 723.394;
+    readonly xSeed: 12.5;
+    readonly xAmplitude: 11;
+    readonly yWave: 100;
+    readonly yPhase: 2323.234;
+    readonly ySeed: 456.1;
+    readonly yAmplitude: 23;
+};
+/** the noise field released particles flow along */
+export declare const FLOW_FIELD: {
+    readonly frequency: 0.01;
+    readonly xSeedOffset: 33.23;
+    readonly ySeedDivisor: 13.23;
+};
+export interface VaporizingFront {
+    /** drives the fray waves */
+    time: number;
+    /** particles further than this (squared) from the bottom left corner break off */
+    radiusPow: number;
+    /** alpha factor that fades the particles out very late */
+    fade: number;
+}
+/** where the front is at the given animation progress */
+export declare function vaporizingFront(animationT: number, maxParticleX: number, minParticleY: number, height: number): VaporizingFront;
+/** has the front passed the particle at x, y. No tan() waves: their poles break off whole rows */
+export declare function isBehindFront(x: number, y: number, height: number, deltaTSec: number, seed: number, { time, radiusPow }: VaporizingFront): boolean;

package/lib/webgl/simplex-noise.glsl.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 3D simplex noise by Ian McEwan, Ashima Arts (MIT License)
+ * https://github.com/ashima/webgl-noise
+ */
+export declare const SIMPLEX_NOISE_3D = "\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x * 34.0) + 10.0) * x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);\n  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n  vec3 i = floor(v + dot(v, C.yyy));\n  vec3 x0 = v - i + dot(i, C.xxx);\n\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min(g.xyz, l.zxy);\n  vec3 i2 = max(g.xyz, l.zxy);\n\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy;\n  vec3 x3 = x0 - D.yyy;\n\n  i = mod289(i);\n  vec4 p = permute(permute(permute(\n      i.z + vec4(0.0, i1.z, i2.z, 1.0))\n    + i.y + vec4(0.0, i1.y, i2.y, 1.0))\n    + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n\n  float n_ = 0.142857142857;\n  vec3 ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_);\n\n  vec4 x = x_ * ns.x + ns.yyyy;\n  vec4 y = y_ * ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4(x.xy, y.xy);\n  vec4 b1 = vec4(x.zw, y.zw);\n  vec4 s0 = floor(b0) * 2.0 + 1.0;\n  vec4 s1 = floor(b1) * 2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n\n  vec3 p0 = vec3(a0.xy, h.x);\n  vec3 p1 = vec3(a0.zw, h.y);\n  vec3 p2 = vec3(a1.xy, h.z);\n  vec3 p3 = vec3(a1.zw, h.w);\n\n  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n  vec4 m = max(0.5 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);\n  m = m * m;\n  return 105.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));\n}\n";

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

@@ -0,0 +1,46 @@
+import { AnimationState } from '../animation.state';
+import { ParticleRenderer, ParticleRendererParams } from '../particle-renderer';
+import { Particles } from '../particles';
+import { WsThanosCrumble } from '../ws-thanos.options';
+/**
+ * Simulates and draws the particles on the GPU.
+ * The particle state lives in two buffers: every frame the update program reads
+ * one and writes the other via transform feedback, then the draw program renders it.
+ * Once at the start the crack program computes the shard and crack distances of every particle.
+ */
+export declare class WebGlParticleRenderer implements ParticleRenderer {
+    readonly canvas: HTMLCanvasElement;
+    private readonly gl;
+    private readonly params;
+    readonly kind = "webgl";
+    readonly crumble: WsThanosCrumble;
+    private readonly count;
+    private readonly maxParticleX;
+    private readonly minParticleY;
+    private readonly updateProgram;
+    private readonly drawProgram;
+    private readonly buffers;
+    private readonly stateBuffers;
+    private readonly updateVaos;
+    private readonly drawVaos;
+    private readonly updateUniforms;
+    private readonly drawUniforms;
+    private current;
+    /** get a WebGL2 context for the canvas or null if the browser can't */
+    static createContext(canvas: HTMLCanvasElement): WebGL2RenderingContext | null;
+    /** the largest canvas size the GPU can render into */
+    static maxCanvasSize(gl: WebGL2RenderingContext): number;
+    constructor(canvas: HTMLCanvasElement, gl: WebGL2RenderingContext, particles: Particles, params: ParticleRendererParams);
+    render({ deltaTSec, animationT }: AnimationState): void;
+    dispose(): void;
+    /** run the bound vertex array through the bound program into the target buffer */
+    private runTransformFeedback;
+    /** run the crack program once: shard center and crack distances per particle */
+    private createCracks;
+    private uniformLocations;
+    private createProgram;
+    private compileShader;
+    /** a buffer with the given data, or of the given byte size when it is filled on the GPU */
+    private createBuffer;
+    private createVao;
+}

package/lib/webgl/webgl-shaders.d.ts

@@ -0,0 +1,27 @@
+import { WsThanosCrumble } from '../ws-thanos.options';
+/** attribute locations shared by all programs */
+export declare const AttributeLocation: {
+    readonly POSITION: 0;
+    readonly VELOCITY: 1;
+    readonly ACCELERATION: 2;
+    readonly ALPHA: 3;
+    readonly COLOR: 4;
+    readonly RELEASED_AT: 5;
+    readonly CRACK: 6;
+    readonly CELL_RANDOM: 7;
+};
+/** crumble mode as passed to the shaders */
+export declare const CRUMBLE_MODE: Record<WsThanosCrumble, number>;
+export declare const UPDATE_FEEDBACK_VARYINGS: string[];
+export declare const CRACK_FEEDBACK_VARYINGS: string[];
+/** floats per particle written by the crack program */
+export declare const CRACK_LENGTH = 5;
+/** runs once: which shard each particle belongs to and how far it is from the next crack */
+export declare const CRACK_VERTEX_SHADER: string;
+/** moves the particles, the GPU port of updateParticlesOnCpu plus the crumble modes */
+export declare const UPDATE_VERTEX_SHADER: string;
+/** transform feedback only, nothing is rasterized */
+export declare const FEEDBACK_FRAGMENT_SHADER = "#version 300 es\nprecision mediump float;\nout vec4 outColor;\nvoid main() {\n  outColor = vec4(0.0);\n}\n";
+/** draws every particle as one device pixel */
+export declare const DRAW_VERTEX_SHADER: string;
+export declare const DRAW_FRAGMENT_SHADER = "#version 300 es\nprecision mediump float;\nin vec4 vColor;\nout vec4 outColor;\nvoid main() {\n  outColor = vColor;\n}\n";

package/lib/ws-thanos.directive.d.ts

@@ -1,11 +1,13 @@
 import { Observable } from 'rxjs';
 import { AnimationState } from './animation.state';
+import type { WsThanosOptions } from './ws-thanos.options';
 import * as i0 from "@angular/core";
 export declare class WsThanosDirective {
     private wsThanosCompleteSubject;
     private untilDestroyed;
+    /** override the provided options for this element */
+    readonly wsThanosOptions: import("@angular/core").InputSignal<Partial<WsThanosOptions> | undefined>;
     wsThanosComplete: Observable<void>;
-    private subscriptions;
     private readonly vaporizeDomElem;
     private readonly thanosService;
     private readonly thanosOptions;
@@ -25,5 +27,5 @@ export declare class WsThanosDirective {
      */
     vaporize(removeElem?: boolean): Observable<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WsThanosDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WsThanosDirective, "[wsThanos], ws-thanos", ["thanos"], {}, { "wsThanosComplete": "wsThanosComplete"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WsThanosDirective, "[wsThanos], ws-thanos", ["thanos"], { "wsThanosOptions": { "alias": "wsThanosOptions"; "required": false; "isSignal": true; }; }, { "wsThanosComplete": "wsThanosComplete"; }, never, never, true, never>;
 }

package/lib/ws-thanos.options.d.ts

@@ -1,5 +1,19 @@
+/**
+ * How the element breaks apart (needs WebGL2, the canvas fallback always uses 'dust'):
+ * - dust: particles blow away along the vaporizing front
+ * - cracks: cracks spread through the element before it turns to dust
+ * - shards: cracks split the element into shards that shift and tilt before they turn to dust
+ * - chunks: whole chunks break off, jump away and then crumble to dust
+ */
+export type WsThanosCrumble = 'dust' | 'cracks' | 'shards' | 'chunks';
 export interface WsThanosOptions {
     animationLength: number;
     maxParticleCount: number;
     particleAcceleration: number;
+    /** play a windy, sandy sound while vaporizing */
+    sound: boolean;
+    /** volume of the snap sound between 0 and 1 */
+    soundVolume: number;
+    /** how the element breaks apart */
+    crumble: WsThanosCrumble;
 }

package/lib/ws-thanos.service.d.ts

@@ -1,20 +1,23 @@
 import { Observable } from 'rxjs';
 import { AnimationState } from './animation.state';
+import type { WsThanosOptions } from './ws-thanos.options';
 import * as i0 from "@angular/core";
 export declare class WsThanosService {
     private readonly thanosOptions;
-    private static getParticleIndicesForBase;
-    private static getColorIndicesForCoord;
-    private static updateParticles;
-    private static drawParticles;
-    private static prepareCanvasForVaporize;
-    private static createParticlesForImageData;
-    private static getXYFromFlowField;
+    private readonly document;
+    private readonly snapSound;
+    /** shared by all effects, browsers only allow a few WebGL contexts */
+    private readonly gpuBudget;
     /**
      * start the vaporize-effect.
+     * @param options override the provided options for this element
      */
-    vaporize(elem: HTMLElement): Observable<AnimationState>;
+    vaporize(elem: HTMLElement, options?: Partial<WsThanosOptions>): Observable<AnimationState>;
     private vaporizeIntern;
+    /** the element sits at the bottom left of the larger effect canvas */
+    private placeEffectCanvas;
+    /** position of the element inside its parent, where absolute children are placed */
+    private offsetInParent;
     static ɵfac: i0.ɵɵFactoryDeclaration<WsThanosService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wolsok/thanos",
-  "version": "17.0.37",
+  "version": "18.0.0",
   "description": "Wolf Soko's implementation of a cool Thanos snapping vaporizing effect for destroying dom elements",
   "bugs": {
     "url": "https://github.com/WolfSoko/wol-sok-mono/issues"