@wolsok/thanos 18.3.3 → 18.4.0

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

@@ -15,11 +15,10 @@ export declare class WebGlParticleRenderer implements ParticleRenderer {
     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 flowField;
     private readonly stateBuffers;
     private readonly updateVaos;
     private readonly drawVaos;
@@ -35,6 +34,8 @@ export declare class WebGlParticleRenderer implements ParticleRenderer {
     dispose(): void;
     /** run the bound vertex array through the bound program into the target buffer */
     private runTransformFeedback;
+    /** render the flow field once into a texture, the update program samples it */
+    private createFlowField;
     /** run the crack program once: shard center and crack distances per particle */
     private createCracks;
     private uniformLocations;

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

@@ -20,6 +20,13 @@ export declare const CRACK_LENGTH = 5;
 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;
+/** one triangle that covers the whole viewport */
+export declare const FULL_VIEWPORT_VERTEX_SHADER = "#version 300 es\nvoid main() {\n  vec2 corner = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  gl_Position = vec4(corner * 2.0 - 1.0, 0.0, 1.0);\n}\n";
+/**
+ * Runs once: the noise field released particles flow along, a texel covers uCell device pixels.
+ * Red and green are the x and y flow, simplex noise mapped to [0, 1], the same noise as FlowField on the CPU.
+ */
+export declare const FLOW_FIELD_FRAGMENT_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 */

package/lib/wind.d.ts

@@ -0,0 +1,40 @@
+/** the dust blows to the top right unless told otherwise */
+export declare const DEFAULT_WIND_DIRECTION = 45;
+/**
+ * Where the dust blows to. The simulation is written for the default wind,
+ * every force it applies is rotated by the difference to this one.
+ */
+export interface Wind {
+    /** unit vector of the direction in screen coordinates, y points down */
+    x: number;
+    y: number;
+    /** rotation from the default wind to this one */
+    cos: number;
+    sin: number;
+}
+/**
+ * room around the element for the dust to fly in, in element widths (left, right)
+ * and element heights (top, bottom)
+ */
+export interface EffectMargins {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/**
+ * @param degrees direction the dust blows to, clockwise from up like a css gradient angle:
+ * 0 up, 90 right, 180 down, 270 left
+ */
+export declare function windOf(degrees?: number): Wind;
+/**
+ * The effect canvas reaches past the element where the dust can fly:
+ * for the default wind one width to the right and four heights up, like before there was a wind.
+ */
+export declare function effectMargins(degrees?: number): EffectMargins;
+/** size of the effect canvas in element sizes */
+export interface EffectScale {
+    width: number;
+    height: number;
+}
+export declare function effectScale(margins: EffectMargins): EffectScale;

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

@@ -25,6 +25,12 @@ export interface WsThanosOptions {
     soundVolume: number;
     /** how the element breaks apart */
     crumble: WsThanosCrumble;
+    /**
+     * the direction the dust blows to in degrees, clockwise from up like a css gradient angle:
+     * 0 up, 90 right, 180 down, 270 left. The vaporizing front sweeps against it.
+     * 45, to the top right, when unset.
+     */
+    windDirection?: number;
     /** warm up the effect while the browser is idle, so the first snap does not stutter */
     preload: boolean;
 }

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

@@ -25,8 +25,9 @@ export declare class WsThanosService {
     private chooseRenderer;
     /** draw the element into an image at the scale the renderer needs */
     private capture;
+    /** the effect canvas reaches past the element where the wind blows the dust */
     private createRenderer;
-    /** the element sits at the bottom left of the larger effect canvas */
+    /** the effect canvas covers the element and the margins around it */
     private placeEffectCanvas;
     /** position of the element inside its parent, where absolute children are placed */
     private offsetInParent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wolsok/thanos",
-  "version": "18.3.3",
+  "version": "18.4.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"