interactive-bg 0.0.0-stage → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +202 -2
- package/dist/core/canvas2d-renderer.cjs +119 -0
- package/dist/core/canvas2d-renderer.cjs.map +1 -0
- package/dist/core/canvas2d-renderer.d.cts +7 -0
- package/dist/core/canvas2d-renderer.d.ts +7 -0
- package/dist/core/canvas2d-renderer.js +119 -0
- package/dist/core/canvas2d-renderer.js.map +1 -0
- package/dist/core/color.cjs +46 -0
- package/dist/core/color.cjs.map +1 -0
- package/dist/core/color.d.cts +6 -0
- package/dist/core/color.d.ts +6 -0
- package/dist/core/color.js +46 -0
- package/dist/core/color.js.map +1 -0
- package/dist/core/engine.cjs +367 -0
- package/dist/core/engine.cjs.map +1 -0
- package/dist/core/engine.d.cts +69 -0
- package/dist/core/engine.d.ts +69 -0
- package/dist/core/engine.js +366 -0
- package/dist/core/engine.js.map +1 -0
- package/dist/core/style.cjs +21 -0
- package/dist/core/style.cjs.map +1 -0
- package/dist/core/style.d.cts +85 -0
- package/dist/core/style.d.ts +85 -0
- package/dist/core/style.js +21 -0
- package/dist/core/style.js.map +1 -0
- package/dist/core/surface.cjs +25 -0
- package/dist/core/surface.cjs.map +1 -0
- package/dist/core/surface.d.cts +42 -0
- package/dist/core/surface.d.ts +42 -0
- package/dist/core/surface.js +24 -0
- package/dist/core/surface.js.map +1 -0
- package/dist/core/webgl-renderer.cjs +137 -0
- package/dist/core/webgl-renderer.cjs.map +1 -0
- package/dist/core/webgl-renderer.d.cts +8 -0
- package/dist/core/webgl-renderer.d.ts +8 -0
- package/dist/core/webgl-renderer.js +137 -0
- package/dist/core/webgl-renderer.js.map +1 -0
- package/dist/core/webgl.cjs +62 -0
- package/dist/core/webgl.cjs.map +1 -0
- package/dist/core/webgl.d.cts +15 -0
- package/dist/core/webgl.d.ts +15 -0
- package/dist/core/webgl.js +60 -0
- package/dist/core/webgl.js.map +1 -0
- package/dist/dots/canvas2d.cjs +14 -0
- package/dist/dots/canvas2d.cjs.map +1 -0
- package/dist/dots/canvas2d.d.cts +5 -0
- package/dist/dots/canvas2d.d.ts +5 -0
- package/dist/dots/canvas2d.js +13 -0
- package/dist/dots/canvas2d.js.map +1 -0
- package/dist/dots/index.cjs +16 -0
- package/dist/dots/index.cjs.map +1 -0
- package/dist/dots/index.d.cts +5 -0
- package/dist/dots/index.d.ts +5 -0
- package/dist/dots/index.js +15 -0
- package/dist/dots/index.js.map +1 -0
- package/dist/dots/webgl.cjs +14 -0
- package/dist/dots/webgl.cjs.map +1 -0
- package/dist/dots/webgl.d.cts +5 -0
- package/dist/dots/webgl.d.ts +5 -0
- package/dist/dots/webgl.js +13 -0
- package/dist/dots/webgl.js.map +1 -0
- package/dist/index.cjs +24 -0
- package/dist/index.d.cts +18 -0
- package/dist/index.d.ts +18 -0
- package/dist/index.js +11 -0
- package/dist/index.umd.js +211 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/plus/canvas2d.cjs +14 -0
- package/dist/plus/canvas2d.cjs.map +1 -0
- package/dist/plus/canvas2d.d.cts +5 -0
- package/dist/plus/canvas2d.d.ts +5 -0
- package/dist/plus/canvas2d.js +13 -0
- package/dist/plus/canvas2d.js.map +1 -0
- package/dist/plus/index.cjs +16 -0
- package/dist/plus/index.cjs.map +1 -0
- package/dist/plus/index.d.cts +5 -0
- package/dist/plus/index.d.ts +5 -0
- package/dist/plus/index.js +15 -0
- package/dist/plus/index.js.map +1 -0
- package/dist/plus/webgl.cjs +14 -0
- package/dist/plus/webgl.cjs.map +1 -0
- package/dist/plus/webgl.d.cts +5 -0
- package/dist/plus/webgl.d.ts +5 -0
- package/dist/plus/webgl.js +13 -0
- package/dist/plus/webgl.js.map +1 -0
- package/dist/shared/buffer.cjs +20 -0
- package/dist/shared/buffer.cjs.map +1 -0
- package/dist/shared/buffer.d.cts +11 -0
- package/dist/shared/buffer.d.ts +11 -0
- package/dist/shared/buffer.js +19 -0
- package/dist/shared/buffer.js.map +1 -0
- package/dist/shared/grid-webgl.cjs +63 -0
- package/dist/shared/grid-webgl.cjs.map +1 -0
- package/dist/shared/grid-webgl.d.cts +10 -0
- package/dist/shared/grid-webgl.d.ts +10 -0
- package/dist/shared/grid-webgl.js +61 -0
- package/dist/shared/grid-webgl.js.map +1 -0
- package/dist/shared/grid.cjs +133 -0
- package/dist/shared/grid.cjs.map +1 -0
- package/dist/shared/grid.d.cts +72 -0
- package/dist/shared/grid.d.ts +72 -0
- package/dist/shared/grid.js +123 -0
- package/dist/shared/grid.js.map +1 -0
- package/dist/shared/noise.cjs +166 -0
- package/dist/shared/noise.cjs.map +1 -0
- package/dist/shared/noise.d.cts +4 -0
- package/dist/shared/noise.d.ts +4 -0
- package/dist/shared/noise.js +166 -0
- package/dist/shared/noise.js.map +1 -0
- package/dist/styles/dots/canvas2d.cjs +99 -0
- package/dist/styles/dots/canvas2d.cjs.map +1 -0
- package/dist/styles/dots/canvas2d.d.cts +7 -0
- package/dist/styles/dots/canvas2d.d.ts +7 -0
- package/dist/styles/dots/canvas2d.js +99 -0
- package/dist/styles/dots/canvas2d.js.map +1 -0
- package/dist/styles/dots/definition.cjs +15 -0
- package/dist/styles/dots/definition.cjs.map +1 -0
- package/dist/styles/dots/definition.d.cts +7 -0
- package/dist/styles/dots/definition.d.ts +7 -0
- package/dist/styles/dots/definition.js +16 -0
- package/dist/styles/dots/definition.js.map +1 -0
- package/dist/styles/dots/motion.cjs +6 -0
- package/dist/styles/dots/motion.cjs.map +1 -0
- package/dist/styles/dots/motion.d.cts +2 -0
- package/dist/styles/dots/motion.d.ts +2 -0
- package/dist/styles/dots/motion.js +6 -0
- package/dist/styles/dots/motion.js.map +1 -0
- package/dist/styles/dots/options.cjs +33 -0
- package/dist/styles/dots/options.cjs.map +1 -0
- package/dist/styles/dots/options.d.cts +33 -0
- package/dist/styles/dots/options.d.ts +33 -0
- package/dist/styles/dots/options.js +32 -0
- package/dist/styles/dots/options.js.map +1 -0
- package/dist/styles/dots/webgl.cjs +113 -0
- package/dist/styles/dots/webgl.cjs.map +1 -0
- package/dist/styles/dots/webgl.d.cts +4 -0
- package/dist/styles/dots/webgl.d.ts +4 -0
- package/dist/styles/dots/webgl.js +113 -0
- package/dist/styles/dots/webgl.js.map +1 -0
- package/dist/styles/plus/canvas2d.cjs +88 -0
- package/dist/styles/plus/canvas2d.cjs.map +1 -0
- package/dist/styles/plus/canvas2d.d.cts +8 -0
- package/dist/styles/plus/canvas2d.d.ts +8 -0
- package/dist/styles/plus/canvas2d.js +88 -0
- package/dist/styles/plus/canvas2d.js.map +1 -0
- package/dist/styles/plus/definition.cjs +17 -0
- package/dist/styles/plus/definition.cjs.map +1 -0
- package/dist/styles/plus/definition.d.cts +9 -0
- package/dist/styles/plus/definition.d.ts +9 -0
- package/dist/styles/plus/definition.js +18 -0
- package/dist/styles/plus/definition.js.map +1 -0
- package/dist/styles/plus/motion.cjs +18 -0
- package/dist/styles/plus/motion.cjs.map +1 -0
- package/dist/styles/plus/motion.d.cts +5 -0
- package/dist/styles/plus/motion.d.ts +5 -0
- package/dist/styles/plus/motion.js +18 -0
- package/dist/styles/plus/motion.js.map +1 -0
- package/dist/styles/plus/options.cjs +45 -0
- package/dist/styles/plus/options.cjs.map +1 -0
- package/dist/styles/plus/options.d.cts +45 -0
- package/dist/styles/plus/options.d.ts +45 -0
- package/dist/styles/plus/options.js +43 -0
- package/dist/styles/plus/options.js.map +1 -0
- package/dist/styles/plus/turns.cjs +102 -0
- package/dist/styles/plus/turns.cjs.map +1 -0
- package/dist/styles/plus/turns.d.cts +17 -0
- package/dist/styles/plus/turns.d.ts +17 -0
- package/dist/styles/plus/turns.js +102 -0
- package/dist/styles/plus/turns.js.map +1 -0
- package/dist/styles/plus/webgl.cjs +121 -0
- package/dist/styles/plus/webgl.cjs.map +1 -0
- package/dist/styles/plus/webgl.d.cts +8 -0
- package/dist/styles/plus/webgl.d.ts +8 -0
- package/dist/styles/plus/webgl.js +121 -0
- package/dist/styles/plus/webgl.js.map +1 -0
- package/dist/styles/topo/canvas2d.cjs +77 -0
- package/dist/styles/topo/canvas2d.cjs.map +1 -0
- package/dist/styles/topo/canvas2d.d.cts +4 -0
- package/dist/styles/topo/canvas2d.d.ts +4 -0
- package/dist/styles/topo/canvas2d.js +77 -0
- package/dist/styles/topo/canvas2d.js.map +1 -0
- package/dist/styles/topo/contours.cjs +83 -0
- package/dist/styles/topo/contours.cjs.map +1 -0
- package/dist/styles/topo/contours.d.cts +9 -0
- package/dist/styles/topo/contours.d.ts +9 -0
- package/dist/styles/topo/contours.js +83 -0
- package/dist/styles/topo/contours.js.map +1 -0
- package/dist/styles/topo/definition.cjs +13 -0
- package/dist/styles/topo/definition.cjs.map +1 -0
- package/dist/styles/topo/definition.d.cts +7 -0
- package/dist/styles/topo/definition.d.ts +7 -0
- package/dist/styles/topo/definition.js +14 -0
- package/dist/styles/topo/definition.js.map +1 -0
- package/dist/styles/topo/field.cjs +118 -0
- package/dist/styles/topo/field.cjs.map +1 -0
- package/dist/styles/topo/field.d.cts +26 -0
- package/dist/styles/topo/field.d.ts +26 -0
- package/dist/styles/topo/field.js +118 -0
- package/dist/styles/topo/field.js.map +1 -0
- package/dist/styles/topo/options.cjs +39 -0
- package/dist/styles/topo/options.cjs.map +1 -0
- package/dist/styles/topo/options.d.cts +52 -0
- package/dist/styles/topo/options.d.ts +52 -0
- package/dist/styles/topo/options.js +38 -0
- package/dist/styles/topo/options.js.map +1 -0
- package/dist/styles/topo/terrain.cjs +22 -0
- package/dist/styles/topo/terrain.cjs.map +1 -0
- package/dist/styles/topo/terrain.d.cts +11 -0
- package/dist/styles/topo/terrain.d.ts +11 -0
- package/dist/styles/topo/terrain.js +22 -0
- package/dist/styles/topo/terrain.js.map +1 -0
- package/dist/styles/topo/webgl.cjs +150 -0
- package/dist/styles/topo/webgl.cjs.map +1 -0
- package/dist/styles/topo/webgl.d.cts +7 -0
- package/dist/styles/topo/webgl.d.ts +7 -0
- package/dist/styles/topo/webgl.js +150 -0
- package/dist/styles/topo/webgl.js.map +1 -0
- package/dist/topo/canvas2d.cjs +14 -0
- package/dist/topo/canvas2d.cjs.map +1 -0
- package/dist/topo/canvas2d.d.cts +5 -0
- package/dist/topo/canvas2d.d.ts +5 -0
- package/dist/topo/canvas2d.js +13 -0
- package/dist/topo/canvas2d.js.map +1 -0
- package/dist/topo/index.cjs +16 -0
- package/dist/topo/index.cjs.map +1 -0
- package/dist/topo/index.d.cts +5 -0
- package/dist/topo/index.d.ts +5 -0
- package/dist/topo/index.js +15 -0
- package/dist/topo/index.js.map +1 -0
- package/dist/topo/webgl.cjs +14 -0
- package/dist/topo/webgl.cjs.map +1 -0
- package/dist/topo/webgl.d.cts +5 -0
- package/dist/topo/webgl.d.ts +5 -0
- package/dist/topo/webgl.js +13 -0
- package/dist/topo/webgl.js.map +1 -0
- package/package.json +192 -4
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webgl.js","names":[],"sources":["../../src/core/webgl.ts"],"sourcesContent":["/**\n * Vertex shader for one triangle that covers the whole viewport, drawn with\n * `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a\n * fragment shader that works per pixel from `gl_FragCoord`.\n */\nexport const FULLSCREEN_VERTEX_SHADER = `#version 300 es\nvoid main() {\n vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}`;\n\n/**\n * Compile and link a shader program. Returns `null` if the context is lost, and\n * throws with the driver's message if a shader doesn't compile or link (the\n * engine then falls back to the style's next renderer). Nothing is left behind\n * on failure.\n */\nexport function createProgram(\n gl: WebGL2RenderingContext,\n vertexSource: string,\n fragmentSource: string,\n): WebGLProgram | null {\n const program = gl.createProgram();\n let vertex: WebGLShader | null = null;\n let fragment: WebGLShader | null = null;\n try {\n vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);\n fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);\n if (!program || !vertex || !fragment) {\n gl.deleteProgram(program);\n return null;\n }\n gl.attachShader(program, vertex);\n gl.attachShader(program, fragment);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) {\n throw new Error(`interactive-bg: shader link error: ${gl.getProgramInfoLog(program)}`);\n }\n return program;\n } catch (error) {\n gl.deleteProgram(program);\n throw error;\n } finally {\n // Linked programs keep their own copy; the shader objects aren't needed either way.\n gl.deleteShader(vertex);\n gl.deleteShader(fragment);\n }\n}\n\n/** Look up uniform locations by name. */\nexport function getUniforms<N extends string>(\n gl: WebGL2RenderingContext,\n program: WebGLProgram,\n names: readonly N[],\n): Record<N, WebGLUniformLocation | null> {\n return Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)])) as Record<\n N,\n WebGLUniformLocation | null\n >;\n}\n\nfunction compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n const shader = gl.createShader(type);\n if (!shader) return null;\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {\n const log = gl.getShaderInfoLog(shader);\n gl.deleteShader(shader);\n throw new Error(`interactive-bg: shader error: ${log}`);\n }\n return shader;\n}\n"],"mappings":";;;;;;AAKA,IAAa,2BAA2B;;;;;;;;;;;AAYxC,SAAgB,cACd,IACA,cACA,gBACqB;CACrB,MAAM,UAAU,GAAG,cAAc;CACjC,IAAI,SAA6B;CACjC,IAAI,WAA+B;CACnC,IAAI;EACF,SAAS,QAAQ,IAAI,GAAG,eAAe,YAAY;EACnD,WAAW,QAAQ,IAAI,GAAG,iBAAiB,cAAc;EACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,UAAU;GACpC,GAAG,cAAc,OAAO;GACxB,OAAO;EACT;EACA,GAAG,aAAa,SAAS,MAAM;EAC/B,GAAG,aAAa,SAAS,QAAQ;EACjC,GAAG,YAAY,OAAO;EACtB,IAAI,CAAC,GAAG,oBAAoB,SAAS,GAAG,WAAW,KAAK,CAAC,GAAG,cAAc,GACxE,MAAM,IAAI,MAAM,sCAAsC,GAAG,kBAAkB,OAAO,GAAG;EAEvF,OAAO;CACT,SAAS,OAAO;EACd,GAAG,cAAc,OAAO;EACxB,MAAM;CACR,UAAU;EAER,GAAG,aAAa,MAAM;EACtB,GAAG,aAAa,QAAQ;CAC1B;AACF;;AAGA,SAAgB,YACd,IACA,SACA,OACwC;CACxC,OAAO,OAAO,YAAY,MAAM,KAAK,SAAS,CAAC,MAAM,GAAG,mBAAmB,SAAS,IAAI,CAAC,CAAC,CAAC;AAI7F;AAEA,SAAS,QAAQ,IAA4B,MAAc,QAAoC;CAC7F,MAAM,SAAS,GAAG,aAAa,IAAI;CACnC,IAAI,CAAC,QAAQ,OAAO;CACpB,GAAG,aAAa,QAAQ,MAAM;CAC9B,GAAG,cAAc,MAAM;CACvB,IAAI,CAAC,GAAG,mBAAmB,QAAQ,GAAG,cAAc,KAAK,CAAC,GAAG,cAAc,GAAG;EAC5E,MAAM,MAAM,GAAG,iBAAiB,MAAM;EACtC,GAAG,aAAa,MAAM;EACtB,MAAM,IAAI,MAAM,iCAAiC,KAAK;CACxD;CACA,OAAO;AACT"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_canvas2d_renderer = require("../core/canvas2d-renderer.cjs");
|
|
3
|
+
const require_style = require("../core/style.cjs");
|
|
4
|
+
const require_canvas2d = require("../styles/dots/canvas2d.cjs");
|
|
5
|
+
const require_definition = require("../styles/dots/definition.cjs");
|
|
6
|
+
// src/dots/canvas2d.ts
|
|
7
|
+
/** A grid of wandering dots, drawn with Canvas 2D only. */
|
|
8
|
+
var dots = require_style.defineStyle({
|
|
9
|
+
...require_definition.dotsStyle,
|
|
10
|
+
renderers: [require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createDotsCanvas2D)]
|
|
11
|
+
});
|
|
12
|
+
exports.dots = dots;
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=canvas2d.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas2d.cjs","names":["defineStyle","dotsStyle","canvas2dRenderer","createDotsCanvas2D"],"sources":["../../src/dots/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createDotsCanvas2D } from '../styles/dots/canvas2d';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with Canvas 2D only. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({ ...dotsStyle, renderers: [canvas2dRenderer(createDotsCanvas2D)] });\n"],"mappings":";;;;;;;AASA,IAAa,OAAkCA,cAAAA,YAAY;CAAE,GAAGC,mBAAAA;CAAW,WAAW,CAACC,0BAAAA,iBAAiBC,iBAAAA,kBAAkB,CAAC;AAAE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
|
|
2
|
+
import { defineStyle } from "../core/style.js";
|
|
3
|
+
import { createDotsCanvas2D } from "../styles/dots/canvas2d.js";
|
|
4
|
+
import { dotsStyle } from "../styles/dots/definition.js";
|
|
5
|
+
// src/dots/canvas2d.ts
|
|
6
|
+
/** A grid of wandering dots, drawn with Canvas 2D only. */
|
|
7
|
+
var dots = defineStyle({
|
|
8
|
+
...dotsStyle,
|
|
9
|
+
renderers: [canvas2dRenderer(createDotsCanvas2D)]
|
|
10
|
+
});
|
|
11
|
+
export { dots };
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=canvas2d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas2d.js","names":[],"sources":["../../src/dots/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createDotsCanvas2D } from '../styles/dots/canvas2d';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with Canvas 2D only. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({ ...dotsStyle, renderers: [canvas2dRenderer(createDotsCanvas2D)] });\n"],"mappings":";;;;;;AASA,IAAa,OAAkC,YAAY;CAAE,GAAG;CAAW,WAAW,CAAC,iBAAiB,kBAAkB,CAAC;AAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_canvas2d_renderer = require("../core/canvas2d-renderer.cjs");
|
|
3
|
+
const require_style = require("../core/style.cjs");
|
|
4
|
+
const require_webgl_renderer = require("../core/webgl-renderer.cjs");
|
|
5
|
+
const require_canvas2d = require("../styles/dots/canvas2d.cjs");
|
|
6
|
+
const require_definition = require("../styles/dots/definition.cjs");
|
|
7
|
+
const require_webgl = require("../styles/dots/webgl.cjs");
|
|
8
|
+
// src/dots/index.ts
|
|
9
|
+
/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */
|
|
10
|
+
var dots = require_style.defineStyle({
|
|
11
|
+
...require_definition.dotsStyle,
|
|
12
|
+
renderers: [require_webgl_renderer.webglRenderer(require_webgl.createDotsWebGL), require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createDotsCanvas2D)]
|
|
13
|
+
});
|
|
14
|
+
exports.dots = dots;
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["defineStyle","dotsStyle","webglRenderer","createDotsWebGL","canvas2dRenderer","createDotsCanvas2D"],"sources":["../../src/dots/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createDotsCanvas2D } from '../styles/dots/canvas2d';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\nimport { createDotsWebGL } from '../styles/dots/webgl';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({\n ...dotsStyle,\n renderers: [webglRenderer(createDotsWebGL), canvas2dRenderer(createDotsCanvas2D)],\n});\n"],"mappings":";;;;;;;;;AAWA,IAAa,OAAkCA,cAAAA,YAAY;CACzD,GAAGC,mBAAAA;CACH,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,eAAe,GAAGC,0BAAAA,iBAAiBC,iBAAAA,kBAAkB,CAAC;AAClF,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type StyleFactory } from '../core/style.cjs';
|
|
2
|
+
import type { DotsOptions } from '../styles/dots/options.cjs';
|
|
3
|
+
export type { DotsOptions };
|
|
4
|
+
/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */
|
|
5
|
+
export declare const dots: StyleFactory<DotsOptions>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type StyleFactory } from '../core/style.js';
|
|
2
|
+
import type { DotsOptions } from '../styles/dots/options.js';
|
|
3
|
+
export type { DotsOptions };
|
|
4
|
+
/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */
|
|
5
|
+
export declare const dots: StyleFactory<DotsOptions>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
|
|
2
|
+
import { defineStyle } from "../core/style.js";
|
|
3
|
+
import { webglRenderer } from "../core/webgl-renderer.js";
|
|
4
|
+
import { createDotsCanvas2D } from "../styles/dots/canvas2d.js";
|
|
5
|
+
import { dotsStyle } from "../styles/dots/definition.js";
|
|
6
|
+
import { createDotsWebGL } from "../styles/dots/webgl.js";
|
|
7
|
+
// src/dots/index.ts
|
|
8
|
+
/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */
|
|
9
|
+
var dots = defineStyle({
|
|
10
|
+
...dotsStyle,
|
|
11
|
+
renderers: [webglRenderer(createDotsWebGL), canvas2dRenderer(createDotsCanvas2D)]
|
|
12
|
+
});
|
|
13
|
+
export { dots };
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/dots/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createDotsCanvas2D } from '../styles/dots/canvas2d';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\nimport { createDotsWebGL } from '../styles/dots/webgl';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with WebGL2 where available and Canvas 2D otherwise. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({\n ...dotsStyle,\n renderers: [webglRenderer(createDotsWebGL), canvas2dRenderer(createDotsCanvas2D)],\n});\n"],"mappings":";;;;;;;;AAWA,IAAa,OAAkC,YAAY;CACzD,GAAG;CACH,WAAW,CAAC,cAAc,eAAe,GAAG,iBAAiB,kBAAkB,CAAC;AAClF,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_style = require("../core/style.cjs");
|
|
3
|
+
const require_webgl_renderer = require("../core/webgl-renderer.cjs");
|
|
4
|
+
const require_definition = require("../styles/dots/definition.cjs");
|
|
5
|
+
const require_webgl = require("../styles/dots/webgl.cjs");
|
|
6
|
+
// src/dots/webgl.ts
|
|
7
|
+
/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */
|
|
8
|
+
var dots = require_style.defineStyle({
|
|
9
|
+
...require_definition.dotsStyle,
|
|
10
|
+
renderers: [require_webgl_renderer.webglRenderer(require_webgl.createDotsWebGL)]
|
|
11
|
+
});
|
|
12
|
+
exports.dots = dots;
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=webgl.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webgl.cjs","names":["defineStyle","dotsStyle","webglRenderer","createDotsWebGL"],"sources":["../../src/dots/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\nimport { createDotsWebGL } from '../styles/dots/webgl';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({ ...dotsStyle, renderers: [webglRenderer(createDotsWebGL)] });\n"],"mappings":";;;;;;;AASA,IAAa,OAAkCA,cAAAA,YAAY;CAAE,GAAGC,mBAAAA;CAAW,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,eAAe,CAAC;AAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type StyleFactory } from '../core/style.cjs';
|
|
2
|
+
import type { DotsOptions } from '../styles/dots/options.cjs';
|
|
3
|
+
export type { DotsOptions };
|
|
4
|
+
/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */
|
|
5
|
+
export declare const dots: StyleFactory<DotsOptions>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type StyleFactory } from '../core/style.js';
|
|
2
|
+
import type { DotsOptions } from '../styles/dots/options.js';
|
|
3
|
+
export type { DotsOptions };
|
|
4
|
+
/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */
|
|
5
|
+
export declare const dots: StyleFactory<DotsOptions>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineStyle } from "../core/style.js";
|
|
2
|
+
import { webglRenderer } from "../core/webgl-renderer.js";
|
|
3
|
+
import { dotsStyle } from "../styles/dots/definition.js";
|
|
4
|
+
import { createDotsWebGL } from "../styles/dots/webgl.js";
|
|
5
|
+
// src/dots/webgl.ts
|
|
6
|
+
/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */
|
|
7
|
+
var dots = defineStyle({
|
|
8
|
+
...dotsStyle,
|
|
9
|
+
renderers: [webglRenderer(createDotsWebGL)]
|
|
10
|
+
});
|
|
11
|
+
export { dots };
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=webgl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"webgl.js","names":[],"sources":["../../src/dots/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { dotsStyle } from '../styles/dots/definition';\nimport type { DotsOptions } from '../styles/dots/options';\nimport { createDotsWebGL } from '../styles/dots/webgl';\n\nexport type { DotsOptions };\n\n/** A grid of wandering dots, drawn with WebGL2 only: nothing is drawn in browsers without it. */\nexport const dots: StyleFactory<DotsOptions> = defineStyle({ ...dotsStyle, renderers: [webglRenderer(createDotsWebGL)] });\n"],"mappings":";;;;;;AASA,IAAa,OAAkC,YAAY;CAAE,GAAG;CAAW,WAAW,CAAC,cAAc,eAAe,CAAC;AAAE,CAAC"}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_engine = require("./core/engine.cjs");
|
|
3
|
+
const require_canvas2d_renderer = require("./core/canvas2d-renderer.cjs");
|
|
4
|
+
const require_style = require("./core/style.cjs");
|
|
5
|
+
const require_color = require("./core/color.cjs");
|
|
6
|
+
const require_webgl = require("./core/webgl.cjs");
|
|
7
|
+
const require_webgl_renderer = require("./core/webgl-renderer.cjs");
|
|
8
|
+
const require_noise = require("./shared/noise.cjs");
|
|
9
|
+
const require_topo_index = require("./topo/index.cjs");
|
|
10
|
+
const require_dots_index = require("./dots/index.cjs");
|
|
11
|
+
const require_plus_index = require("./plus/index.cjs");
|
|
12
|
+
exports.FULLSCREEN_VERTEX_SHADER = require_webgl.FULLSCREEN_VERTEX_SHADER;
|
|
13
|
+
exports.canvas2dRenderer = require_canvas2d_renderer.canvas2dRenderer;
|
|
14
|
+
exports.createBackground = require_engine.createBackground;
|
|
15
|
+
exports.createNoise3D = require_noise.createNoise3D;
|
|
16
|
+
exports.createProgram = require_webgl.createProgram;
|
|
17
|
+
exports.defineStyle = require_style.defineStyle;
|
|
18
|
+
exports.dots = require_dots_index.dots;
|
|
19
|
+
exports.engineDefaults = require_engine.engineDefaults;
|
|
20
|
+
exports.getUniforms = require_webgl.getUniforms;
|
|
21
|
+
exports.parseColor = require_color.parseColor;
|
|
22
|
+
exports.plus = require_plus_index.plus;
|
|
23
|
+
exports.topo = require_topo_index.topo;
|
|
24
|
+
exports.webglRenderer = require_webgl_renderer.webglRenderer;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { createBackground, engineDefaults } from './core/engine.cjs';
|
|
2
|
+
export type { Background, EngineOptions } from './core/engine.cjs';
|
|
3
|
+
export { topo } from './topo/index.cjs';
|
|
4
|
+
export type { TopoOptions } from './topo/index.cjs';
|
|
5
|
+
export { dots } from './dots/index.cjs';
|
|
6
|
+
export type { DotsOptions } from './dots/index.cjs';
|
|
7
|
+
export { plus } from './plus/index.cjs';
|
|
8
|
+
export type { PlusOptions } from './plus/index.cjs';
|
|
9
|
+
export { defineStyle } from './core/style.cjs';
|
|
10
|
+
export type { Frame, Point, Pointer, RendererName, Style, StyleBase, StyleDefinition, StyleFactory, StyleRenderer, } from './core/style.cjs';
|
|
11
|
+
export type { Fade, Renderer, Surface } from './core/surface.cjs';
|
|
12
|
+
export { webglRenderer } from './core/webgl-renderer.cjs';
|
|
13
|
+
export { canvas2dRenderer } from './core/canvas2d-renderer.cjs';
|
|
14
|
+
export { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from './core/webgl.cjs';
|
|
15
|
+
export { parseColor } from './core/color.cjs';
|
|
16
|
+
export type { RGBA } from './core/color.cjs';
|
|
17
|
+
export { createNoise3D } from './shared/noise.cjs';
|
|
18
|
+
export type { Noise3D } from './shared/noise.cjs';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { createBackground, engineDefaults } from './core/engine.js';
|
|
2
|
+
export type { Background, EngineOptions } from './core/engine.js';
|
|
3
|
+
export { topo } from './topo/index.js';
|
|
4
|
+
export type { TopoOptions } from './topo/index.js';
|
|
5
|
+
export { dots } from './dots/index.js';
|
|
6
|
+
export type { DotsOptions } from './dots/index.js';
|
|
7
|
+
export { plus } from './plus/index.js';
|
|
8
|
+
export type { PlusOptions } from './plus/index.js';
|
|
9
|
+
export { defineStyle } from './core/style.js';
|
|
10
|
+
export type { Frame, Point, Pointer, RendererName, Style, StyleBase, StyleDefinition, StyleFactory, StyleRenderer, } from './core/style.js';
|
|
11
|
+
export type { Fade, Renderer, Surface } from './core/surface.js';
|
|
12
|
+
export { webglRenderer } from './core/webgl-renderer.js';
|
|
13
|
+
export { canvas2dRenderer } from './core/canvas2d-renderer.js';
|
|
14
|
+
export { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from './core/webgl.js';
|
|
15
|
+
export { parseColor } from './core/color.js';
|
|
16
|
+
export type { RGBA } from './core/color.js';
|
|
17
|
+
export { createNoise3D } from './shared/noise.js';
|
|
18
|
+
export type { Noise3D } from './shared/noise.js';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createBackground, engineDefaults } from "./core/engine.js";
|
|
2
|
+
import { canvas2dRenderer } from "./core/canvas2d-renderer.js";
|
|
3
|
+
import { defineStyle } from "./core/style.js";
|
|
4
|
+
import { parseColor } from "./core/color.js";
|
|
5
|
+
import { FULLSCREEN_VERTEX_SHADER, createProgram, getUniforms } from "./core/webgl.js";
|
|
6
|
+
import { webglRenderer } from "./core/webgl-renderer.js";
|
|
7
|
+
import { createNoise3D } from "./shared/noise.js";
|
|
8
|
+
import { topo } from "./topo/index.js";
|
|
9
|
+
import { dots } from "./dots/index.js";
|
|
10
|
+
import { plus } from "./plus/index.js";
|
|
11
|
+
export { FULLSCREEN_VERTEX_SHADER, canvas2dRenderer, createBackground, createNoise3D, createProgram, defineStyle, dots, engineDefaults, getUniforms, parseColor, plus, topo, webglRenderer };
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.InteractiveBg={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){return e.top>0||e.right>0||e.bottom>0||e.left>0}function n(e,t,n,r,i,a){let o=r===`auto`?t:[...t.filter(e=>e.name===r),...t.filter(e=>e.name!==r)];for(let[t,r]of o.entries()){t>0&&a?.();let o=r.create(e(),n,i);if(o)return o}return null}var r=Object.freeze({renderer:`auto`,backgroundColor:null,fadeOutTop:0,fadeOutRight:0,fadeOutBottom:0,fadeOutLeft:0,interactive:!0,maxDpr:1.5,maxFps:60,idleFps:30,respectReducedMotion:!0});function i(e,t,i={}){let l=typeof e==`string`?document.querySelector(e):e;if(typeof e==`string`&&!l)throw Error(`interactive-bg: no element matches "${e}"`);let u=t.definition,d={...t.options},f={...r,...i},p=s(f.backgroundColor),m=o(f),h=!(l instanceof HTMLCanvasElement),g=h&&l?l.style.position:null,_=h?c(l??null):l,v=n(()=>_,u.renderers,d,f.renderer,()=>{R=!0,J()},h?()=>{let e=c(l??null);_.remove(),_=e}:void 0)??a(u),y=0,b=0,x=1,S=0,C=0,w=0,T=0,E=0,D=0,O=[],k=[],A={x:0,y:0,influence:0},j={width:0,height:0,dpr:1,dt:0,reducedMotion:!1,pointer:A,clicks:k},M=!1,N=0,P=0,F=0,I=!1,L=!0,ee=!0,te=!1,R=!0,z=window.matchMedia?.(`(prefers-reduced-motion: reduce)`),ne=z?.matches??!1;function B(){return f.respectReducedMotion&&ne}function V(){return v.name!==null&&u.animates(d)&&!B()}function H(){return M||O.length>0||re()}function U(){let e=f.maxFps<=0?f.idleFps:f.idleFps<=0?f.maxFps:Math.min(f.maxFps,f.idleFps),t=u.idleFps?.(d)??0;return t<=0?e:e<=0?t:Math.min(e,t)}function W(e){return e>0?1e3/e:0}function G(){return!te&&!I&&L}function re(){return E!==D||E>0&&(Math.abs(w-S)>.5||Math.abs(T-C)>.5)}function K(){let e=_.getBoundingClientRect(),t=Math.max(1,Math.round(e.width)),n=Math.max(1,Math.round(e.height)),r=Math.min(window.devicePixelRatio||1,Math.max(.5,f.maxDpr));(t!==y||n!==b||r!==x)&&(y=t,b=n,x=r,_.width=Math.round(y*x),_.height=Math.round(b*x),R=!0)}function ie(e){if(P=0,!G())return;let t=W(H()?f.maxFps:U());if(N&&e-N<t*.85){q(t-(e-N));return}let n=N?Math.min((e-N)/1e3,.1):0;N=e;let r=H(),i=1-Math.exp(-n*8);S+=(w-S)*i,C+=(T-C)*i,E+=(D-E)*i,Math.abs(D-E)<.001&&(E=D);let a=V();(a||r||R)&&(R=!1,[k,O]=[O,k],O.length=0,A.x=S,A.y=C,A.influence=E,j.width=y,j.height=b,j.dpr=x,j.dt=n,j.reducedMotion=B(),j.clicks=k,M=v.render(j,p,m)),H()?q():a?q(W(U())):N=0}function q(e=0){P||F||!G()||(e>8?F=window.setTimeout(ae,e*.8):P=requestAnimationFrame(ie))}function ae(){F=0,q()}function J(){F&&clearTimeout(F),F=0,q()}function Y(){P&&cancelAnimationFrame(P),F&&clearTimeout(F),P=F=0}function oe(e){if(!f.interactive||!G())return;let t=_.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=n>=0&&r>=0&&n<=t.width&&r<=t.height;i&&D===0&&(S=n,C=r),w=n,T=r,D=+!!i,(i||E>0)&&J()}function X(e){if(!f.interactive||!G())return;let t=_.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top;n<0||r<0||n>t.width||r>t.height||(O.push({x:n,y:r}),J())}function se(){D=0,J()}function Z(){L=document.visibilityState===`visible`&&ee,N=0,L?J():Y()}function ce(e){ne=e.matches,R=!0,J()}let Q=null;function le(){Q?.removeEventListener?.(`change`,$),Q=window.matchMedia?.(`(resolution: ${window.devicePixelRatio||1}dppx)`)??null,Q?.addEventListener?.(`change`,$)}function $(){K(),J(),le()}le();let ue=new ResizeObserver(()=>{K(),J()});ue.observe(_);let de=typeof IntersectionObserver==`function`?new IntersectionObserver(e=>{ee=e[e.length-1].isIntersecting,Z()}):null;return de?.observe(_),window.addEventListener(`pointermove`,oe,{passive:!0}),window.addEventListener(`pointerdown`,X,{passive:!0}),document.documentElement.addEventListener(`pointerleave`,se),document.addEventListener(`visibilitychange`,Z),z?.addEventListener?.(`change`,ce),K(),q(),{canvas:_,style:u.name,renderer:v.name,get options(){return d},get engineOptions(){return f},setOptions(e){d={...d,...e},v.update(d),R=!0,J()},setEngineOptions(e){let t=f;f={...f,...e},p=s(f.backgroundColor),m=o(f),f.maxDpr!==t.maxDpr&&K(),f.interactive||(E=D=0,O.length=0),R=!0,J()},pause(){I=!0,Y()},resume(){I=!1,N=0,J()},destroy(){te||(te=!0,Y(),ue.disconnect(),de?.disconnect(),window.removeEventListener(`pointermove`,oe),window.removeEventListener(`pointerdown`,X),document.documentElement.removeEventListener(`pointerleave`,se),document.removeEventListener(`visibilitychange`,Z),z?.removeEventListener?.(`change`,ce),Q?.removeEventListener?.(`change`,$),h||v.clear(),v.destroy(),h&&(v.name===`webgl`&&_.getContext(`webgl2`)?.getExtension(`WEBGL_lose_context`)?.loseContext(),_.remove(),l&&g!==null&&(l.style.position=g)))}}}function a(e){let t=e.renderers.map(e=>e.name===`webgl`?`WebGL2`:`Canvas 2D`).join(` or `);return console.warn(`interactive-bg: style "${e.name}" needs ${t}, which this browser doesn't provide`),{name:null,update(){},render:()=>!1,clear(){},destroy(){}}}function o(e){return{top:Math.max(0,e.fadeOutTop),right:Math.max(0,e.fadeOutRight),bottom:Math.max(0,e.fadeOutBottom),left:Math.max(0,e.fadeOutLeft)}}function s(e){return e&&e!==`transparent`?e:null}function c(e){let t=document.createElement(`canvas`);return t.setAttribute(`aria-hidden`,`true`),Object.assign(t.style,{position:e?`absolute`:`fixed`,inset:`0`,width:`100%`,height:`100%`,display:`block`,pointerEvents:`none`,zIndex:e?`0`:`-1`}),e?(getComputedStyle(e).position===`static`&&(e.style.position=`relative`),e.prepend(t)):document.body.prepend(t),t}var l=[`top`,`right`,`bottom`,`left`];function u(e){return{name:`canvas2d`,create(n,r){let i=n.getContext(`2d`);if(!i)return null;let a=e(i,r),o=l.map(()=>({gradient:null,size:0,length:0})),s=(e,t,n,r)=>{let a=e===1||e===3?n:r,s=o[e];if(!s.gradient||s.size!==a||s.length!==t){let[o,c,l,u]=[[0,t,0,0],[n-t,0,n,0],[0,r-t,0,r],[t,0,0,0]][e];s.gradient=i.createLinearGradient(o,c,l,u),s.gradient.addColorStop(0,`rgba(0, 0, 0, 0)`),s.gradient.addColorStop(1,`rgba(0, 0, 0, 1)`),s.size=a,s.length=t}let c=Math.min(t,a);i.fillStyle=s.gradient,e===0?i.fillRect(0,0,n,c):e===1?i.fillRect(n-c,0,c,r):e===2?i.fillRect(0,r-c,n,c):i.fillRect(0,0,c,r)};return{name:`canvas2d`,update(e){a.update(e)},render(e,n,r){let{width:o,height:c,dpr:u}=e;i.setTransform(u,0,0,u,0,0),i.globalAlpha=1,i.globalCompositeOperation=`source-over`,i.clearRect(0,0,o,c);let d=t(r);n&&!d&&(i.fillStyle=n,i.fillRect(0,0,o,c));let f=a.render(e)===!0;if(d){i.setTransform(u,0,0,u,0,0),i.globalAlpha=1,i.globalCompositeOperation=`destination-out`;for(let e=0;e<l.length;e++){let t=r[l[e]];t>0&&s(e,t,o,c)}n&&(i.globalCompositeOperation=`destination-over`,i.fillStyle=n,i.fillRect(0,0,o,c)),i.globalCompositeOperation=`source-over`}return f},clear(){i.setTransform(1,0,0,1,0,0),i.clearRect(0,0,n.width,n.height)},destroy(){a.destroy?.()}}}}}function d(e){if(e.renderers.length===0)throw Error(`interactive-bg: style "${e.name}" has no renderer`);return Object.assign((t={})=>({definition:e,options:{...e.defaults,...t}}),{styleName:e.name,defaults:e.defaults})}var f=[0,0,0,0],p=null,m=new Map;function h(e){if(!e||e===`transparent`)return f;let t=m.get(e);if(t)return t;if(!p){let e=document.createElement(`canvas`);if(e.width=e.height=1,p=e.getContext(`2d`,{willReadFrequently:!0}),!p)return[0,0,0,1]}p.clearRect(0,0,1,1),p.fillStyle=`#000`,p.fillStyle=e,p.fillRect(0,0,1,1);let[n,r,i,a]=p.getImageData(0,0,1,1).data,o=[n/255,r/255,i/255,a/255];return m.size>64&&m.clear(),m.set(e,o),o}var g=`#version 300 es
|
|
2
|
+
void main() {
|
|
3
|
+
vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
|
|
4
|
+
gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
|
|
5
|
+
}`;function _(e,t,n){let r=e.createProgram(),i=null,a=null;try{if(i=y(e,e.VERTEX_SHADER,t),a=y(e,e.FRAGMENT_SHADER,n),!r||!i||!a)return e.deleteProgram(r),null;if(e.attachShader(r,i),e.attachShader(r,a),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)&&!e.isContextLost())throw Error(`interactive-bg: shader link error: ${e.getProgramInfoLog(r)}`);return r}catch(t){throw e.deleteProgram(r),t}finally{e.deleteShader(i),e.deleteShader(a)}}function v(e,t,n){return Object.fromEntries(n.map(n=>[n,e.getUniformLocation(t,n)]))}function y(e,t,n){let r=e.createShader(t);if(!r)return null;if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)&&!e.isContextLost()){let t=e.getShaderInfoLog(r);throw e.deleteShader(r),Error(`interactive-bg: shader error: ${t}`)}return r}var b={alpha:!0,premultipliedAlpha:!0,antialias:!1,depth:!1,stencil:!1,preserveDrawingBuffer:!1,powerPreference:`low-power`},x=`#version 300 es
|
|
6
|
+
precision highp float;
|
|
7
|
+
uniform float uMode;
|
|
8
|
+
uniform vec4 uFade; // top, right, bottom, left, device px (0 = no fade)
|
|
9
|
+
uniform vec2 uSize; // drawing buffer size, device px
|
|
10
|
+
uniform vec4 uColor; // premultiplied background colour
|
|
11
|
+
out vec4 outColor;
|
|
12
|
+
|
|
13
|
+
float keep(float distance, float length) {
|
|
14
|
+
return length > 0.0 ? clamp(distance / length, 0.0, 1.0) : 1.0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
void main() {
|
|
18
|
+
if (uMode > 0.5) {
|
|
19
|
+
outColor = uColor;
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
vec2 p = gl_FragCoord.xy; // origin at the bottom left
|
|
23
|
+
float kept = keep(uSize.y - p.y, uFade.x) * keep(uSize.x - p.x, uFade.y) * keep(p.y, uFade.z) * keep(p.x, uFade.w);
|
|
24
|
+
outColor = vec4(0.0, 0.0, 0.0, 1.0 - kept);
|
|
25
|
+
}`;function S(e){return{name:`webgl`,create(n,r,i){let a=n.getContext(`webgl2`,b);if(!a)return null;let o=r,s;try{s=e(a,o)}catch(e){return console.warn(`interactive-bg: WebGL setup failed, trying the next renderer`,e),a.getExtension(`WEBGL_lose_context`)?.loseContext(),null}let c=null,l=e=>{e.preventDefault(),s=null,c=null},u=(e,t,n)=>{if(!c){let e=_(a,g,x);if(!e)return;c={program:e,uniforms:v(a,e,[`uMode`,`uFade`,`uSize`,`uColor`])}}let{uniforms:r}=c;a.useProgram(c.program),a.uniform1f(r.uMode,0),a.uniform4f(r.uFade,e.top*t,e.right*t,e.bottom*t,e.left*t),a.uniform2f(r.uSize,a.drawingBufferWidth,a.drawingBufferHeight),a.blendFunc(a.ZERO,a.ONE_MINUS_SRC_ALPHA),a.drawArrays(a.TRIANGLES,0,3);let[i,o,s,l]=n;l>0&&(a.uniform1f(r.uMode,1),a.uniform4f(r.uColor,i*l,o*l,s*l,l),a.blendFunc(a.ONE_MINUS_DST_ALPHA,a.ONE),a.drawArrays(a.TRIANGLES,0,3))},d=()=>{s=e(a,o),i()};return n.addEventListener(`webglcontextlost`,l),n.addEventListener(`webglcontextrestored`,d),{name:`webgl`,update(e){o=e,s?.update(e)},render(e,n,r){if(!s)return!1;let i=h(n),[o,c,l,d]=i;a.viewport(0,0,a.drawingBufferWidth,a.drawingBufferHeight);let f=t(r);f?a.clearColor(0,0,0,0):a.clearColor(o*d,c*d,l*d,d),a.clear(a.COLOR_BUFFER_BIT),a.enable(a.BLEND),a.blendFunc(a.ONE,a.ONE_MINUS_SRC_ALPHA);let p=s.render(e)===!0;return f&&u(r,e.dpr,i),p},clear(){s&&(a.clearColor(0,0,0,0),a.clear(a.COLOR_BUFFER_BIT))},destroy(){n.removeEventListener(`webglcontextlost`,l),n.removeEventListener(`webglcontextrestored`,d),s?.destroy?.(),s=null,c&&a.deleteProgram(c.program),c=null}}}}}function C(e){return{data:new Float32Array(e),length:0}}function w(e,t){if(e.length+t>e.data.length){let n=new Float32Array(Math.max(e.data.length*2,e.length+t));n.set(e.data),e.data=n}return e.data}function T(e,t,n,r,i,a){if(!(i<=0))for(let o=0;o<n-1;o++){let n=o*r,s=n+r;for(let c=0;c<t-1;c++){let l=o*t+c,u=e[l],d=e[l+1],f=e[l+t+1],p=e[l+t],m=Math.min(u,d,f,p),h=Math.max(u,d,f,p),g=Math.ceil(m/i),_=Math.floor(h/i);if(g>_)continue;let v=c*r,y=v+r;for(let e=g;e<=_;e++){let t=e*i,o=(u>=t?8:0)|(d>=t?4:0)|(f>=t?2:0)|p>=t;if(o===0||o===15)continue;let c=v+r*E(t,u,d),l=n+r*E(t,d,f),m=v+r*E(t,p,f),h=n+r*E(t,u,p);switch(o){case 1:case 14:a(v,h,m,s,e);break;case 2:case 13:a(m,s,y,l,e);break;case 3:case 12:a(v,h,y,l,e);break;case 4:case 11:a(c,n,y,l,e);break;case 6:case 9:a(c,n,m,s,e);break;case 7:case 8:a(v,h,c,n,e);break;case 5:case 10:{let r=(u+d+f+p)/4>=t;o===5===r?(a(v,h,c,n,e),a(m,s,y,l,e)):(a(c,n,y,l,e),a(v,h,m,s,e));break}}}}}}function E(e,t,n){let r=n-t;return r===0?.5:(e-t)/r}var D=Object.freeze({lineColor:`#5b6576`,majorLineColor:`#7dd3a8`,lineOpacity:.5,lineWidth:1,majorLineWidth:1.75,majorEvery:5,levels:12,scale:.0025,octaves:2,speed:.025,resolution:6,seed:1332056948,pointerRadius:100,pointerStrength:.35});function O(e){return{lineColor:e.lineColor,majorLineColor:e.majorLineColor??e.lineColor,lineOpacity:Math.min(1,Math.max(0,e.lineOpacity)),lineWidth:Math.max(.1,e.lineWidth),majorLineWidth:Math.max(.1,e.majorLineWidth),majorEvery:Math.max(0,Math.round(e.majorEvery)),levelStep:2/Math.max(1,e.levels),cellSize:Math.max(2,e.resolution),octaves:Math.max(1,Math.round(e.octaves)),scale:e.scale,speed:Math.abs(e.speed),seed:e.seed,pointerRadius:Math.max(1,e.pointerRadius),pointerStrength:e.pointerStrength}}var k=1/3,A=1/6,j=new Float32Array([1,1,0,-1,1,0,1,-1,0,-1,-1,0,1,0,1,-1,0,1,1,0,-1,-1,0,-1,0,1,1,0,-1,1,0,1,-1,0,-1,-1]);function M(e){let t=e>>>0;return()=>{t=t+1831565813|0;let e=Math.imul(t^t>>>15,1|t);return e=e+Math.imul(e^e>>>7,61|e)^e,((e^e>>>14)>>>0)/4294967296}}function N(e=Math.random()*2**32){let t=M(e),n=new Uint8Array(256);for(let e=0;e<256;e++)n[e]=e;for(let e=255;e>0;e--){let r=Math.floor(t()*(e+1)),i=n[e];n[e]=n[r],n[r]=i}let r=new Uint8Array(512),i=new Uint8Array(512);for(let e=0;e<512;e++)r[e]=n[e&255],i[e]=r[e]%12;return(e,t,n)=>{let a=(e+t+n)*k,o=Math.floor(e+a),s=Math.floor(t+a),c=Math.floor(n+a),l=(o+s+c)*A,u=e-(o-l),d=t-(s-l),f=n-(c-l),p,m,h,g,_,v;u>=d?d>=f?(p=1,m=0,h=0,g=1,_=1,v=0):u>=f?(p=1,m=0,h=0,g=1,_=0,v=1):(p=0,m=0,h=1,g=1,_=0,v=1):d<f?(p=0,m=0,h=1,g=0,_=1,v=1):u<f?(p=0,m=1,h=0,g=0,_=1,v=1):(p=0,m=1,h=0,g=1,_=1,v=0);let y=u-p+A,b=d-m+A,x=f-h+A,S=u-g+2*A,C=d-_+2*A,w=f-v+2*A,T=u-1+3*A,E=d-1+3*A,D=f-1+3*A,O=o&255,M=s&255,N=c&255,P=0,F=.6-u*u-d*d-f*f;if(F>0){let e=i[O+r[M+r[N]]]*3;F*=F,P+=F*F*(j[e]*u+j[e+1]*d+j[e+2]*f)}if(F=.6-y*y-b*b-x*x,F>0){let e=i[O+p+r[M+m+r[N+h]]]*3;F*=F,P+=F*F*(j[e]*y+j[e+1]*b+j[e+2]*x)}if(F=.6-S*S-C*C-w*w,F>0){let e=i[O+g+r[M+_+r[N+v]]]*3;F*=F,P+=F*F*(j[e]*S+j[e+1]*C+j[e+2]*w)}if(F=.6-T*T-E*E-D*D,F>0){let e=i[O+1+r[M+1+r[N+1]]]*3;F*=F,P+=F*F*(j[e]*T+j[e+1]*E+j[e+2]*D)}return 32*P}}var P=.02;function F(e){let t=e,n=N(t.seed),r=2-2**(1-t.octaves),i=0,a=0,o=0,s=0,c=new Float32Array,l=new Float32Array,u=new Float32Array,d=0,f=0,p=!1,m=0;function h(){let e=Math.ceil(i/t.cellSize)+1,n=Math.ceil(a/t.cellSize)+1;(e!==o||n!==s)&&(o=e,s=n,c=new Float32Array(o*s),l=new Float32Array(o*s),u=new Float32Array(o*s),p=!1)}function g(e,i,a,s){let{cellSize:c,octaves:l,scale:u}=t;for(let t=a;t<s;t++){let a=t*c;for(let s=0;s<o;s++){let d=s*c,f=0;for(let e=0,t=1,r=u;e<l;e++,t*=.5,r*=2)f+=t*n(d*r,a*r,i+e*17.3);e[t*o+s]=f/r}}}return{get cols(){return o},get rows(){return s},get keyA(){return c},get keyB(){return l},get version(){return m},configure(e){let i=t;(e.seed!==i.seed||e.scale!==i.scale||e.octaves!==i.octaves||e.cellSize!==i.cellSize)&&(t={seed:e.seed,scale:e.scale,octaves:e.octaves,cellSize:e.cellSize},e.seed!==i.seed&&(n=N(e.seed)),r=2-2**(1-e.octaves),h(),p=!1)},resize(e,t){i=e,a=t,h()},advance(e){(!p||e<d||e>=d+2*P)&&(d=e,g(c,d,0,s),g(l,d+P,0,s),f=0,p=!0,m++),e>=d+P&&(g(u,d+2*P,f,s),[c,l,u]=[l,u,c],d+=P,f=0,m++);let t=(e-d)/P,n=Math.min(s,Math.ceil(s*t/.8));return n>f&&(g(u,d+2*P,f,n),f=n),t}}}function I(e){let t=F(e),n=e.speed,r=0;return{field:t,configure(e){t.configure(e),n=e.speed},advance(e){return t.resize(e.width,e.height),e.reducedMotion||(r+=e.dt*n),t.advance(r)}}}function L(e,t){let n=O(t),r=I(n),i=new Float32Array,a=C(4096),o=C(1024);function s(e,t,r,i,s){let c=n.majorEvery>0&&s%n.majorEvery===0?o:a,l=w(c,4);l[c.length++]=e,l[c.length++]=t,l[c.length++]=r,l[c.length++]=i}function c(t,n,r){let{data:i,length:a}=t;e.beginPath();for(let t=0;t<a;t+=4)e.moveTo(i[t],i[t+1]),e.lineTo(i[t+2],i[t+3]);e.strokeStyle=n,e.lineWidth=r,e.stroke()}function l(e,t,a,o){let{cols:s,rows:c,keyA:l,keyB:u}=r.field,d=s*c;i.length!==d&&(i=new Float32Array(d));for(let t=0;t<d;t++){let n=l[t];i[t]=n+(u[t]-n)*e}if(o===0)return;let{cellSize:f,pointerRadius:p}=n,m=p*p,h=3*p,g=Math.max(0,Math.floor((t-h)/f)),_=Math.min(s-1,Math.ceil((t+h)/f)),v=Math.max(0,Math.floor((a-h)/f)),y=Math.min(c-1,Math.ceil((a+h)/f));for(let e=v;e<=y;e++){let n=e*f-a;for(let r=g;r<=_;r++){let a=r*f-t;i[e*s+r]+=o*Math.exp(-(a*a+n*n)/m)}}}return{update(e){n=O(e),r.configure(n)},render(t){let u=r.advance(t),{pointer:d}=t;l(u,d.x,d.y,n.pointerStrength*d.influence),a.length=o.length=0;let{cols:f,rows:p}=r.field;T(i,f,p,n.cellSize,n.levelStep,s),e.globalAlpha=n.lineOpacity,c(a,n.lineColor,n.lineWidth),n.majorEvery>0&&c(o,n.majorLineColor,n.majorLineWidth)}}}var ee={name:`topo`,defaults:D,animates:e=>e.speed!==0},te=`#version 300 es
|
|
26
|
+
precision highp float;
|
|
27
|
+
precision highp sampler2D;
|
|
28
|
+
|
|
29
|
+
uniform sampler2D uKeyA;
|
|
30
|
+
uniform sampler2D uKeyB;
|
|
31
|
+
uniform float uBlend;
|
|
32
|
+
uniform vec2 uGrid; // cols, rows
|
|
33
|
+
uniform float uCellSize; // CSS px between grid samples
|
|
34
|
+
uniform float uDpr;
|
|
35
|
+
uniform float uHeight; // canvas height in device px
|
|
36
|
+
uniform vec3 uPointer; // x, y (CSS px), bump height
|
|
37
|
+
uniform float uRadius2;
|
|
38
|
+
uniform float uStep; // height difference between contour levels
|
|
39
|
+
uniform float uMajorEvery;
|
|
40
|
+
uniform vec2 uHalfWidth; // half line widths (device px): minor, major
|
|
41
|
+
uniform vec4 uMinor; // straight RGBA, opacity applied
|
|
42
|
+
uniform vec4 uMajor;
|
|
43
|
+
|
|
44
|
+
out vec4 outColor;
|
|
45
|
+
|
|
46
|
+
float heightAt(ivec2 c) {
|
|
47
|
+
return mix(texelFetch(uKeyA, c, 0).r, texelFetch(uKeyB, c, 0).r, uBlend);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
void main() {
|
|
51
|
+
vec2 p = vec2(gl_FragCoord.x, uHeight - gl_FragCoord.y) / uDpr;
|
|
52
|
+
|
|
53
|
+
// Bilinear interpolation of the height field (same surface the CPU renderer traces).
|
|
54
|
+
vec2 g = p / uCellSize;
|
|
55
|
+
vec2 cell = clamp(floor(g), vec2(0.0), uGrid - 2.0);
|
|
56
|
+
vec2 f = g - cell;
|
|
57
|
+
ivec2 c = ivec2(cell);
|
|
58
|
+
float h = mix(
|
|
59
|
+
mix(heightAt(c), heightAt(c + ivec2(1, 0)), f.x),
|
|
60
|
+
mix(heightAt(c + ivec2(0, 1)), heightAt(c + ivec2(1, 1)), f.x),
|
|
61
|
+
f.y);
|
|
62
|
+
|
|
63
|
+
vec2 d = p - uPointer.xy;
|
|
64
|
+
h += uPointer.z * exp(-dot(d, d) / uRadius2);
|
|
65
|
+
|
|
66
|
+
// Distance to the nearest contour, in device pixels, from the screen-space gradient.
|
|
67
|
+
float v = h / uStep;
|
|
68
|
+
float level = floor(v + 0.5);
|
|
69
|
+
float dist = abs(v - level) / max(fwidth(v), 1e-5);
|
|
70
|
+
|
|
71
|
+
bool major = uMajorEvery > 0.0 && mod(level, uMajorEvery) == 0.0;
|
|
72
|
+
float halfWidth = major ? uHalfWidth.y : uHalfWidth.x;
|
|
73
|
+
vec4 line = major ? uMajor : uMinor;
|
|
74
|
+
// Analytic antialiasing: coverage ramps over one pixel at the line edge.
|
|
75
|
+
float a = line.a * clamp(halfWidth + 0.5 - dist, 0.0, 1.0);
|
|
76
|
+
outColor = vec4(line.rgb * a, a); // premultiplied; the engine blends it over the background
|
|
77
|
+
}`,R=[`uKeyA`,`uKeyB`,`uBlend`,`uGrid`,`uCellSize`,`uDpr`,`uHeight`,`uPointer`,`uRadius2`,`uStep`,`uMajorEvery`,`uHalfWidth`,`uMinor`,`uMajor`];function z(e,t){let n=O(t),r=I(n),i=_(e,g,te),a=i?v(e,i,R):null,o=[e.createTexture(),e.createTexture()];for(let t of o)e.bindTexture(e.TEXTURE_2D,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE);let s=0,c=0,l=-1;function u(){let{field:t}=r,n=s!==t.cols||c!==t.rows;if(!n&&l===t.version)return;let i=[t.keyA,t.keyB];for(let r=0;r<2;r++)e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,o[r]),n?e.texImage2D(e.TEXTURE_2D,0,e.R32F,t.cols,t.rows,0,e.RED,e.FLOAT,i[r]):e.texSubImage2D(e.TEXTURE_2D,0,0,0,t.cols,t.rows,e.RED,e.FLOAT,i[r]);s=t.cols,c=t.rows,l=t.version}return{update(e){n=O(e),r.configure(n)},render(t){let o=r.advance(t);if(!i||!a)return;u();let s=h(n.lineColor),c=h(n.majorLineColor),l=n.lineOpacity,{field:d}=r;e.useProgram(i),e.uniform1i(a.uKeyA,0),e.uniform1i(a.uKeyB,1),e.uniform1f(a.uBlend,o),e.uniform2f(a.uGrid,d.cols,d.rows),e.uniform1f(a.uCellSize,n.cellSize),e.uniform1f(a.uDpr,t.dpr),e.uniform1f(a.uHeight,e.drawingBufferHeight),e.uniform3f(a.uPointer,t.pointer.x,t.pointer.y,n.pointerStrength*t.pointer.influence),e.uniform1f(a.uRadius2,n.pointerRadius*n.pointerRadius),e.uniform1f(a.uStep,n.levelStep),e.uniform1f(a.uMajorEvery,n.majorEvery),e.uniform2f(a.uHalfWidth,n.lineWidth*t.dpr/2,n.majorLineWidth*t.dpr/2),e.uniform4f(a.uMinor,s[0],s[1],s[2],s[3]*l),e.uniform4f(a.uMajor,c[0],c[1],c[2],c[3]*l),e.drawArrays(e.TRIANGLES,0,3)},destroy(){e.deleteTexture(o[0]),e.deleteTexture(o[1]),e.deleteProgram(i)}}}var ne=d({...ee,renderers:[S(z),u(L)]}),B=Math.PI*2;function V(e,t,n){let r=Math.max(1,Math.floor(e/n)),i=Math.max(1,Math.floor(t/n));return{cols:r,rows:i,originX:(e-(r-1)*n)/2,originY:(t-(i-1)*n)/2}}function H(e,t,n){let r=Math.sin(e*12.9898+t*78.233+n)*43758.5453;return(r-Math.floor(r))*B}function U(){let e=new Float32Array,t=0;return(n,r)=>{if(t===n&&e.length===n*r*4)return e;e=new Float32Array(n*r*4);for(let t=0;t<r;t++)for(let r=0;r<n;r++){let i=(t*n+r)*4,a=H(r,t,0),o=H(r,t,1);e[i]=Math.cos(a),e[i+1]=Math.sin(a),e[i+2]=Math.cos(o),e[i+3]=Math.sin(o)}return t=n,e}}function W(e){return{sx:Math.sin(e),cx:Math.cos(e),sy:Math.sin(e*1.3),cy:Math.cos(e*1.3)}}function G(e,t){let n=Math.max(0,1-e/t);return n*n}function re(e,t,n){let r=(e-t)/n;return Math.exp(-r*r)}function K(e,t){let n=Math.max(0,1-e/t);return n*n}var ie=.25;function q(e,t){let n=e*t*B*1.3;return Math.ceil(n/ie)}function ae(e){return Math.max(5,q(e.jitter,e.jitterSpeed))}function J(){let e=[];return{waves:e,advance(t,n,r){for(let n of e)n.age+=t.dt;for(let t=e.length-1;t>=0;t--)e[t].age>=n&&e.splice(t,1);if(r)for(let n of t.clicks)e.length===8&&e.shift(),e.push({x:n.x,y:n.y,age:0})},pack(t,n,r){t.fill(0);for(let i=0;i<e.length;i++){let a=e[i];t[i*4]=a.x,t[i*4+1]=a.y,t[i*4+2]=n*a.age,t[i*4+3]=K(a.age,r)}}}}var Y=.6,oe=Object.freeze({color:`#8b95a5`,opacity:.6,size:1.6,spacing:26,jitter:1.2,jitterSpeed:.35,pointerRadius:160,pointerStrength:22,waveSpeed:520,waveStrength:10,waveWidth:60,waveDuration:1.8});function X(e){return{...e,opacity:Math.min(1,Math.max(0,e.opacity)),size:Math.max(.1,e.size),spacing:Math.max(4,e.spacing),jitter:Math.max(0,e.jitter),jitterSpeed:Math.max(0,e.jitterSpeed),pointerRadius:Math.max(1,e.pointerRadius),waveSpeed:Math.max(1,e.waveSpeed),waveWidth:Math.max(1,e.waveWidth),waveDuration:Math.max(.05,e.waveDuration)}}var se=4,Z=8;function ce(e,t){let n=X(t),r=J(),i=new Float32Array(32),a=0,o=Array.from({length:9},()=>C(256));function s(e,t,n){let r=w(e,2);r[e.length++]=t,r[e.length++]=n}function c(t,n){let{data:r,length:i}=t;e.lineWidth=2*n,e.beginPath();for(let t=0;t<i;t+=2)e.moveTo(r[t],r[t+1]),e.lineTo(r[t]+.01,r[t+1]);e.stroke()}let l=U();return{update(e){n=X(e)},render(t){t.reducedMotion||(a+=t.dt*n.jitterSpeed*B),r.advance(t,n.waveDuration,n.waveStrength!==0);let{spacing:u,size:d,jitter:f,pointerRadius:p,waveWidth:m,waveStrength:h}=n,{cols:g,rows:_,originX:v,originY:y}=V(t.width,t.height,u),b=l(g,_),{sx:x,cx:S,sy:C,cy:w}=W(a),T=n.pointerStrength*t.pointer.influence,{x:E,y:D}=t.pointer,O=r.waves.length;r.pack(i,n.waveSpeed,n.waveDuration);let k=3*m;for(let e of o)e.length=0;for(let e=0;e<_;e++){let t=y+e*u;for(let n=0;n<g;n++){let r=v+n*u,a=(e*g+n)*4,c=r+f*(x*b[a]+S*b[a+1]),l=t+f*(w*b[a+2]-C*b[a+3]);if(T!==0){let e=r-E,n=t-D;if(Math.abs(e)<p&&Math.abs(n)<p){let t=Math.sqrt(e*e+n*n);if(t>0&&t<p){let r=T*G(t,p)/t;c+=e*r,l+=n*r}}}let d=0;for(let e=0;e<O*4;e+=4){let n=r-i[e],a=t-i[e+1],o=i[e+2]+k;if(Math.abs(n)>o||Math.abs(a)>o)continue;let s=Math.sqrt(n*n+a*a);if(s===0||Math.abs(s-i[e+2])>k)continue;let u=re(s,i[e+2],m)*i[e+3],f=h*u/s;c+=n*f,l+=a*f,d+=u}s(o[Math.min(Z,Math.round(d*se))],c,l)}}e.globalAlpha=n.opacity,e.strokeStyle=n.color,e.lineCap=`round`;for(let e=0;e<=Z;e++)o[e].length>0&&c(o[e],d*(1+Y*e/se));return O>0}}}var Q={name:`dots`,defaults:oe,animates:e=>e.jitter>0&&e.jitterSpeed>0,idleFps:ae},le=[`uCols`,`uOrigin`,`uSpacing`,`uViewport`,`uDpr`,`uClock`,`uJitter`],$=`
|
|
78
|
+
uniform int uCols;
|
|
79
|
+
uniform vec2 uOrigin; // CSS px of mark (0, 0)
|
|
80
|
+
uniform float uSpacing;
|
|
81
|
+
uniform vec2 uViewport; // canvas size in CSS px
|
|
82
|
+
uniform float uDpr;
|
|
83
|
+
uniform float uClock; // wander phase, radians
|
|
84
|
+
uniform float uJitter;
|
|
85
|
+
|
|
86
|
+
float phase(vec2 ij, float salt) {
|
|
87
|
+
return fract(sin(ij.x * 12.9898 + ij.y * 78.233 + salt) * 43758.5453) * ${B.toFixed(6)};
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// This vertex's mark as (column, row). Integer maths: float division can put the first
|
|
91
|
+
// mark of a row at the end of the previous one on some GPUs.
|
|
92
|
+
vec2 markCell() {
|
|
93
|
+
return vec2(float(gl_VertexID % uCols), float(gl_VertexID / uCols));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
vec2 restPosition(vec2 ij) {
|
|
97
|
+
return uOrigin + ij * uSpacing;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
vec2 wander(vec2 ij) {
|
|
101
|
+
return uJitter * vec2(sin(uClock + phase(ij, 0.0)), cos(uClock * 1.3 + phase(ij, 1.0)));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// CSS px (origin top left) to clip space.
|
|
105
|
+
vec4 toClip(vec2 p) {
|
|
106
|
+
vec2 clip = p / uViewport * 2.0 - 1.0;
|
|
107
|
+
return vec4(clip.x, -clip.y, 0.0, 1.0);
|
|
108
|
+
}
|
|
109
|
+
`;function ue(e,t,n,r,i,a,o){e.uniform1i(t.uCols,n.cols),e.uniform2f(t.uOrigin,n.originX,n.originY),e.uniform1f(t.uSpacing,i),e.uniform2f(t.uViewport,r.width,r.height),e.uniform1f(t.uDpr,r.dpr),e.uniform1f(t.uClock,a),e.uniform1f(t.uJitter,o)}var de=`#version 300 es
|
|
110
|
+
precision highp float;
|
|
111
|
+
|
|
112
|
+
${$}
|
|
113
|
+
uniform float uSize; // dot radius, CSS px
|
|
114
|
+
uniform vec3 uPointer; // x, y, push distance (strength × influence)
|
|
115
|
+
uniform float uPointerRadius;
|
|
116
|
+
uniform vec4 uWaves[8]; // x, y, ring radius, envelope (0 = inactive)
|
|
117
|
+
uniform float uWaveStrength;
|
|
118
|
+
uniform float uWaveWidth;
|
|
119
|
+
|
|
120
|
+
out float vRadius; // device px
|
|
121
|
+
out float vPointSize; // device px
|
|
122
|
+
|
|
123
|
+
void main() {
|
|
124
|
+
vec2 ij = markCell();
|
|
125
|
+
vec2 rest = restPosition(ij);
|
|
126
|
+
vec2 p = rest + wander(ij);
|
|
127
|
+
|
|
128
|
+
vec2 d = rest - uPointer.xy;
|
|
129
|
+
float dist = length(d);
|
|
130
|
+
if (dist > 0.0 && dist < uPointerRadius) {
|
|
131
|
+
float k = 1.0 - dist / uPointerRadius;
|
|
132
|
+
p += d / dist * uPointer.z * k * k;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
float grow = 0.0;
|
|
136
|
+
for (int w = 0; w < 8; w++) {
|
|
137
|
+
vec4 wave = uWaves[w];
|
|
138
|
+
if (wave.w <= 0.0) continue;
|
|
139
|
+
vec2 dw = rest - wave.xy;
|
|
140
|
+
float dd = length(dw);
|
|
141
|
+
if (dd == 0.0) continue;
|
|
142
|
+
float x = (dd - wave.z) / uWaveWidth;
|
|
143
|
+
float ring = exp(-x * x) * wave.w;
|
|
144
|
+
p += dw / dd * uWaveStrength * ring;
|
|
145
|
+
grow += ring;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
vRadius = uSize * (1.0 + ${Y.toFixed(3)} * grow) * uDpr;
|
|
149
|
+
vPointSize = 2.0 * vRadius + 2.0; // room for the antialiased edge
|
|
150
|
+
gl_PointSize = vPointSize;
|
|
151
|
+
gl_Position = toClip(p);
|
|
152
|
+
}`,fe=`#version 300 es
|
|
153
|
+
precision highp float;
|
|
154
|
+
|
|
155
|
+
uniform vec4 uColor; // straight RGBA, opacity applied
|
|
156
|
+
in float vRadius;
|
|
157
|
+
in float vPointSize;
|
|
158
|
+
out vec4 outColor;
|
|
159
|
+
|
|
160
|
+
void main() {
|
|
161
|
+
float dist = length(gl_PointCoord - 0.5) * vPointSize;
|
|
162
|
+
float a = uColor.a * clamp(vRadius + 0.5 - dist, 0.0, 1.0);
|
|
163
|
+
outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
|
|
164
|
+
}`,pe=[...le,`uSize`,`uPointer`,`uPointerRadius`,`uWaves`,`uWaveStrength`,`uWaveWidth`,`uColor`];function me(e,t){let n=X(t),r=J(),i=new Float32Array(32),a=0,o=_(e,de,fe),s=o?v(e,o,pe):null;return{update(e){n=X(e)},render(t){if(t.reducedMotion||(a+=t.dt*n.jitterSpeed*B),r.advance(t,n.waveDuration,n.waveStrength!==0),!o||!s)return r.waves.length>0;r.pack(i,n.waveSpeed,n.waveDuration);let c=V(t.width,t.height,n.spacing),l=h(n.color);return e.useProgram(o),ue(e,s,c,t,n.spacing,a,n.jitter),e.uniform1f(s.uSize,n.size),e.uniform3f(s.uPointer,t.pointer.x,t.pointer.y,n.pointerStrength*t.pointer.influence),e.uniform1f(s.uPointerRadius,n.pointerRadius),e.uniform4fv(s.uWaves,i),e.uniform1f(s.uWaveStrength,n.waveStrength),e.uniform1f(s.uWaveWidth,n.waveWidth),e.uniform4f(s.uColor,l[0],l[1],l[2],l[3]*n.opacity),e.drawArrays(e.POINTS,0,c.cols*c.rows),r.waves.length>0},destroy(){e.deleteProgram(o)}}}var he=d({...Q,renderers:[S(me),u(ce)]}),ge=Object.freeze({color:`#8b95a5`,opacity:.6,size:4,weight:1.2,spacing:28,jitter:1,jitterSpeed:.35,pointerAlign:1,turnTime:.25,waveSpeed:520,waveAlign:1,waveWeight:1.5,waveWidth:60,waveDuration:1.8}),_e=e=>Math.min(1,Math.max(0,e));function ve(e){return{...e,opacity:_e(e.opacity),size:Math.max(.5,e.size),weight:Math.max(.1,e.weight),spacing:Math.max(4,e.spacing),jitter:Math.max(0,e.jitter),jitterSpeed:Math.max(0,e.jitterSpeed),pointerAlign:_e(e.pointerAlign),turnTime:Math.max(0,e.turnTime),waveSpeed:Math.max(1,e.waveSpeed),waveAlign:_e(e.waveAlign),waveWeight:Math.max(0,e.waveWeight),waveWidth:Math.max(1,e.waveWidth),waveDuration:Math.max(.05,e.waveDuration)}}function ye(e){return e.waveAlign!==0||e.waveWeight!==0}function be(e){let t=e*e;return e*(.99997726+t*(-.33262347+t*(.19354346+t*(-.11643287+t*(.05265332-.0117212*t)))))}function xe(e,t){let n=Math.abs(e);return n>=Math.abs(t)?n===0?0:be(t/e):-be(e/t)}var Se=Math.PI/2,Ce=.05;function we(e){return e-Se*Math.round(e/Se)}function Te(){let e=new Float32Array,t=new Float32Array(32);function n(e,n,r){for(let i=0;i<e.length;i++){let a=e[i];t[i*4]=a.x,t[i*4+1]=a.y,t[i*4+2]=n*a.age,t[i*4+3]=K(a.age,r)}}let r=!1,i=!1,a=NaN,o=NaN,s=NaN,c=NaN,l=NaN,u=null,d=!1;return{get data(){return e},get changed(){return r},get settling(){return i},update(f,p,m,h){let{cols:g,rows:_,originX:v,originY:y}=m,{spacing:b,waveSpeed:x,waveWidth:S,waveDuration:C,waveAlign:w}=p,T=e.length!==g*_*2;T&&(e=new Float32Array(g*_*2));let E=p.pointerAlign*f.pointer.influence,{x:D,y:O}=f.pointer,k=!T&&!i&&!d&&h.length===0&&E===s&&(E===0||D===a&&O===o&&v===c&&y===l&&p===u);if(d=h.length>0,k){r=!1;return}a=D,o=O,s=E,c=v,l=y,u=p;let A=h.length;n(h,x,C);let j=3*S,M=Ce/p.size,N=p.turnTime>0?1-Math.exp(-f.dt/p.turnTime):1;i=!1;for(let n=0;n<_;n++){let r=y+n*b;for(let a=0;a<g;a++){let o=v+a*b,s=0;E!==0&&(s=E*xe(o-D,r-O));let c=0;for(let e=0;e<A*4;e+=4){let n=o-t[e],i=r-t[e+1],a=t[e+2]+j;if(Math.abs(n)>a||Math.abs(i)>a)continue;let l=Math.sqrt(n*n+i*i);if(Math.abs(l-t[e+2])>j)continue;let u=re(l,t[e+2],S)*t[e+3];c+=u,s+=w*Math.min(1,u)*xe(n,i)}let l=(n*g+a)*2,u=we(s-e[l]);Math.abs(u)<M?e[l]=we(s):(e[l]=we(e[l]+u*N),i=!0),e[l+1]=c}}r=!0}}}var Ee=8,De=16;function Oe(e,t){let n=ve(t),r=J(),i=U(),a=Te(),o=0,s=Array.from({length:17},()=>C(512));function c(e,t,n,r,i){let a=w(e,4);a[e.length++]=t,a[e.length++]=n,a[e.length++]=r,a[e.length++]=i}function l(t,n){let{data:r,length:i}=t;e.lineWidth=n,e.beginPath();for(let t=0;t<i;t+=4){let n=r[t],i=r[t+1],a=r[t+2],o=r[t+3];e.moveTo(n-a,i-o),e.lineTo(n+a,i+o),e.moveTo(n+o,i-a),e.lineTo(n-o,i+a)}e.stroke()}return{update(e){n=ve(e)},render(t){t.reducedMotion||(o+=t.dt*n.jitterSpeed*B),r.advance(t,n.waveDuration,ye(n));let{spacing:u,size:d,jitter:f}=n,p=V(t.width,t.height,u),{cols:m,rows:h,originX:g,originY:_}=p,v=i(m,h),{sx:y,cx:b,sy:x,cy:S}=W(o);a.update(t,n,p,r.waves);let C=a.data;for(let e of s)e.length=0;for(let e=0;e<h;e++){let t=_+e*u;for(let n=0;n<m;n++){let r=e*m+n,i=r*4,a=g+n*u+f*(y*v[i]+b*v[i+1]),o=t+f*(S*v[i+2]-x*v[i+3]),l=C[r*2],p=Math.min(De,Math.round(C[r*2+1]*Ee));if(l===0)c(s[p],a,o,d,0);else{let e=l*l,t=1-e*(.5-e*(1/24-e*(1/720-e/40320))),n=l*(1-e*(1/6-e*(1/120-e/5040)));c(s[p],a,o,d*t,d*n)}}}e.globalAlpha=n.opacity,e.strokeStyle=n.color,e.lineCap=`round`;for(let e=0;e<=De;e++)s[e].length>0&&l(s[e],n.weight*(1+n.waveWeight*e/Ee));return r.waves.length>0||a.settling}}}var ke={name:`plus`,defaults:ge,animates:e=>e.jitter>0&&e.jitterSpeed>0,idleFps:ae},Ae=`#version 300 es
|
|
165
|
+
precision highp float;
|
|
166
|
+
|
|
167
|
+
layout(location = 0) in vec2 aTurn; // angle (radians), wave-crest height
|
|
168
|
+
|
|
169
|
+
${$}
|
|
170
|
+
uniform float uSize; // arm length, CSS px
|
|
171
|
+
uniform float uWeight; // stroke weight, CSS px
|
|
172
|
+
uniform float uWaveWeight;
|
|
173
|
+
|
|
174
|
+
out vec2 vAxis; // cos, sin of the sign's angle
|
|
175
|
+
out float vArm; // device px
|
|
176
|
+
out float vHalfWeight; // device px
|
|
177
|
+
out float vPointSize; // device px
|
|
178
|
+
|
|
179
|
+
void main() {
|
|
180
|
+
vec2 ij = markCell();
|
|
181
|
+
vec2 p = restPosition(ij) + wander(ij);
|
|
182
|
+
|
|
183
|
+
vAxis = vec2(cos(aTurn.x), sin(aTurn.x));
|
|
184
|
+
vArm = uSize * uDpr;
|
|
185
|
+
vHalfWeight = 0.5 * uWeight * (1.0 + uWaveWeight * min(aTurn.y, 2.0)) * uDpr;
|
|
186
|
+
vPointSize = 2.0 * (vArm + vHalfWeight) + 2.0; // room for the antialiased edge
|
|
187
|
+
gl_PointSize = vPointSize;
|
|
188
|
+
gl_Position = toClip(p);
|
|
189
|
+
}`,je=`#version 300 es
|
|
190
|
+
precision highp float;
|
|
191
|
+
|
|
192
|
+
uniform vec4 uColor; // straight RGBA, opacity applied
|
|
193
|
+
in vec2 vAxis;
|
|
194
|
+
in float vArm;
|
|
195
|
+
in float vHalfWeight;
|
|
196
|
+
in float vPointSize;
|
|
197
|
+
out vec4 outColor;
|
|
198
|
+
|
|
199
|
+
// Distance to a round-capped arm of half-length vArm along x.
|
|
200
|
+
float arm(vec2 q) {
|
|
201
|
+
return length(vec2(max(abs(q.x) - vArm, 0.0), q.y)) - vHalfWeight;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
void main() {
|
|
205
|
+
vec2 p = (gl_PointCoord - 0.5) * vPointSize;
|
|
206
|
+
vec2 q = vec2(dot(p, vAxis), dot(p, vec2(-vAxis.y, vAxis.x))); // into the sign's frame
|
|
207
|
+
float d = min(arm(q), arm(q.yx));
|
|
208
|
+
float a = uColor.a * clamp(0.5 - d, 0.0, 1.0);
|
|
209
|
+
outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
|
|
210
|
+
}`,Me=[...le,`uSize`,`uWeight`,`uWaveWeight`,`uColor`];function Ne(e,t){let n=ve(t),r=J(),i=Te(),a=0,o=-1,s=_(e,Ae,je),c=s?v(e,s,Me):null,l=e.createVertexArray(),u=e.createBuffer();return e.bindVertexArray(l),e.bindBuffer(e.ARRAY_BUFFER,u),e.enableVertexAttribArray(0),e.vertexAttribPointer(0,2,e.FLOAT,!1,0,0),e.bindVertexArray(null),{update(e){n=ve(e)},render(t){t.reducedMotion||(a+=t.dt*n.jitterSpeed*B),r.advance(t,n.waveDuration,ye(n));let d=V(t.width,t.height,n.spacing);i.update(t,n,d,r.waves);let f=r.waves.length>0||i.settling;if(!s||!c)return f;let p=d.cols*d.rows;e.bindBuffer(e.ARRAY_BUFFER,u),o===p?i.changed&&e.bufferSubData(e.ARRAY_BUFFER,0,i.data):(e.bufferData(e.ARRAY_BUFFER,i.data,e.DYNAMIC_DRAW),o=p);let m=h(n.color);return e.useProgram(s),ue(e,c,d,t,n.spacing,a,n.jitter),e.uniform1f(c.uSize,n.size),e.uniform1f(c.uWeight,n.weight),e.uniform1f(c.uWaveWeight,n.waveWeight),e.uniform4f(c.uColor,m[0],m[1],m[2],m[3]*n.opacity),e.bindVertexArray(l),e.drawArrays(e.POINTS,0,p),e.bindVertexArray(null),f},destroy(){e.deleteProgram(s),e.deleteBuffer(u),e.deleteVertexArray(l)}}}var Pe=d({...ke,renderers:[S(Ne),u(Oe)]});e.FULLSCREEN_VERTEX_SHADER=g,e.canvas2dRenderer=u,e.createBackground=i,e.createNoise3D=N,e.createProgram=_,e.defineStyle=d,e.dots=he,e.engineDefaults=r,e.getUniforms=v,e.parseColor=h,e.plus=Pe,e.topo=ne,e.webglRenderer=S});
|
|
211
|
+
//# sourceMappingURL=index.umd.js.map
|