interactive-bg 0.0.0-stage → 0.1.0

package/dist/shared/buffer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Numbers collected during a frame, in an array that's reused from frame to
+ * frame and only ever grows, so drawing allocates nothing once it's warm.
+ */
+export interface FloatBuffer {
+    data: Float32Array<ArrayBuffer>;
+    length: number;
+}
+export declare function createFloatBuffer(capacity: number): FloatBuffer;
+/** Make room for `count` more values (doubling the array if needed) and return the array to write into. */
+export declare function reserve(buffer: FloatBuffer, count: number): Float32Array<ArrayBuffer>;

package/dist/shared/buffer.js

@@ -0,0 +1,19 @@
+// src/shared/buffer.ts
+function createFloatBuffer(capacity) {
+	return {
+		data: new Float32Array(capacity),
+		length: 0
+	};
+}
+/** Make room for `count` more values (doubling the array if needed) and return the array to write into. */
+function reserve(buffer, count) {
+	if (buffer.length + count > buffer.data.length) {
+		const grown = new Float32Array(Math.max(buffer.data.length * 2, buffer.length + count));
+		grown.set(buffer.data);
+		buffer.data = grown;
+	}
+	return buffer.data;
+}
+export { createFloatBuffer, reserve };
+
+//# sourceMappingURL=buffer.js.map

package/dist/shared/buffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.js","names":[],"sources":["../../src/shared/buffer.ts"],"sourcesContent":["/**\n * Numbers collected during a frame, in an array that's reused from frame to\n * frame and only ever grows, so drawing allocates nothing once it's warm.\n */\nexport interface FloatBuffer {\n  data: Float32Array<ArrayBuffer>;\n  length: number;\n}\n\nexport function createFloatBuffer(capacity: number): FloatBuffer {\n  return { data: new Float32Array(capacity), length: 0 };\n}\n\n/** Make room for `count` more values (doubling the array if needed) and return the array to write into. */\nexport function reserve(buffer: FloatBuffer, count: number): Float32Array<ArrayBuffer> {\n  if (buffer.length + count > buffer.data.length) {\n    const grown = new Float32Array(Math.max(buffer.data.length * 2, buffer.length + count));\n    grown.set(buffer.data);\n    buffer.data = grown;\n  }\n  return buffer.data;\n}\n"],"mappings":";AASA,SAAgB,kBAAkB,UAA+B;CAC/D,OAAO;EAAE,MAAM,IAAI,aAAa,QAAQ;EAAG,QAAQ;CAAE;AACvD;;AAGA,SAAgB,QAAQ,QAAqB,OAA0C;CACrF,IAAI,OAAO,SAAS,QAAQ,OAAO,KAAK,QAAQ;EAC9C,MAAM,QAAQ,IAAI,aAAa,KAAK,IAAI,OAAO,KAAK,SAAS,GAAG,OAAO,SAAS,KAAK,CAAC;EACtF,MAAM,IAAI,OAAO,IAAI;EACrB,OAAO,OAAO;CAChB;CACA,OAAO,OAAO;AAChB"}

package/dist/shared/grid-webgl.cjs

@@ -0,0 +1,63 @@
+const require_grid = require("./grid.cjs");
+// src/shared/grid-webgl.ts
+/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */
+var GRID_UNIFORMS = [
+	"uCols",
+	"uOrigin",
+	"uSpacing",
+	"uViewport",
+	"uDpr",
+	"uClock",
+	"uJitter"
+];
+/**
+* Vertex-shader preamble for the grid styles, which draw one GL point per mark.
+* Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.
+*/
+var GRID_VERTEX_GLSL = `
+uniform int uCols;
+uniform vec2 uOrigin;         // CSS px of mark (0, 0)
+uniform float uSpacing;
+uniform vec2 uViewport;       // canvas size in CSS px
+uniform float uDpr;
+uniform float uClock;         // wander phase, radians
+uniform float uJitter;
+
+float phase(vec2 ij, float salt) {
+  return fract(sin(ij.x * 12.9898 + ij.y * 78.233 + salt) * 43758.5453) * ${require_grid.TAU.toFixed(6)};
+}
+
+// This vertex's mark as (column, row). Integer maths: float division can put the first
+// mark of a row at the end of the previous one on some GPUs.
+vec2 markCell() {
+  return vec2(float(gl_VertexID % uCols), float(gl_VertexID / uCols));
+}
+
+vec2 restPosition(vec2 ij) {
+  return uOrigin + ij * uSpacing;
+}
+
+vec2 wander(vec2 ij) {
+  return uJitter * vec2(sin(uClock + phase(ij, 0.0)), cos(uClock * 1.3 + phase(ij, 1.0)));
+}
+
+// CSS px (origin top left) to clip space.
+vec4 toClip(vec2 p) {
+  vec2 clip = p / uViewport * 2.0 - 1.0;
+  return vec4(clip.x, -clip.y, 0.0, 1.0);
+}
+`;
+function setGridUniforms(gl, uniforms, grid, frame, spacing, clock, jitter) {
+	gl.uniform1i(uniforms.uCols, grid.cols);
+	gl.uniform2f(uniforms.uOrigin, grid.originX, grid.originY);
+	gl.uniform1f(uniforms.uSpacing, spacing);
+	gl.uniform2f(uniforms.uViewport, frame.width, frame.height);
+	gl.uniform1f(uniforms.uDpr, frame.dpr);
+	gl.uniform1f(uniforms.uClock, clock);
+	gl.uniform1f(uniforms.uJitter, jitter);
+}
+exports.GRID_UNIFORMS = GRID_UNIFORMS;
+exports.GRID_VERTEX_GLSL = GRID_VERTEX_GLSL;
+exports.setGridUniforms = setGridUniforms;
+
+//# sourceMappingURL=grid-webgl.cjs.map

package/dist/shared/grid-webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-webgl.cjs","names":["TAU"],"sources":["../../src/shared/grid-webgl.ts"],"sourcesContent":["import type { Frame } from '../core/style';\nimport { TAU, type Grid } from './grid';\n\n/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */\nexport const GRID_UNIFORMS = ['uCols', 'uOrigin', 'uSpacing', 'uViewport', 'uDpr', 'uClock', 'uJitter'] as const;\n\n/**\n * Vertex-shader preamble for the grid styles, which draw one GL point per mark.\n * Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.\n */\nexport const GRID_VERTEX_GLSL = `\nuniform int uCols;\nuniform vec2 uOrigin;         // CSS px of mark (0, 0)\nuniform float uSpacing;\nuniform vec2 uViewport;       // canvas size in CSS px\nuniform float uDpr;\nuniform float uClock;         // wander phase, radians\nuniform float uJitter;\n\nfloat phase(vec2 ij, float salt) {\n  return fract(sin(ij.x * 12.9898 + ij.y * 78.233 + salt) * 43758.5453) * ${TAU.toFixed(6)};\n}\n\n// This vertex's mark as (column, row). Integer maths: float division can put the first\n// mark of a row at the end of the previous one on some GPUs.\nvec2 markCell() {\n  return vec2(float(gl_VertexID % uCols), float(gl_VertexID / uCols));\n}\n\nvec2 restPosition(vec2 ij) {\n  return uOrigin + ij * uSpacing;\n}\n\nvec2 wander(vec2 ij) {\n  return uJitter * vec2(sin(uClock + phase(ij, 0.0)), cos(uClock * 1.3 + phase(ij, 1.0)));\n}\n\n// CSS px (origin top left) to clip space.\nvec4 toClip(vec2 p) {\n  vec2 clip = p / uViewport * 2.0 - 1.0;\n  return vec4(clip.x, -clip.y, 0.0, 1.0);\n}\n`;\n\nexport function setGridUniforms(\n  gl: WebGL2RenderingContext,\n  uniforms: Record<(typeof GRID_UNIFORMS)[number], WebGLUniformLocation | null>,\n  grid: Grid,\n  frame: Frame,\n  spacing: number,\n  clock: number,\n  jitter: number,\n): void {\n  gl.uniform1i(uniforms.uCols, grid.cols);\n  gl.uniform2f(uniforms.uOrigin, grid.originX, grid.originY);\n  gl.uniform1f(uniforms.uSpacing, spacing);\n  gl.uniform2f(uniforms.uViewport, frame.width, frame.height);\n  gl.uniform1f(uniforms.uDpr, frame.dpr);\n  gl.uniform1f(uniforms.uClock, clock);\n  gl.uniform1f(uniforms.uJitter, jitter);\n}\n"],"mappings":";;;AAIA,IAAa,gBAAgB;CAAC;CAAS;CAAW;CAAY;CAAa;CAAQ;CAAU;AAAS;;;;;AAMtG,IAAa,mBAAmB;;;;;;;;;;4EAU4CA,aAAAA,IAAI,QAAQ,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAwB3F,SAAgB,gBACd,IACA,UACA,MACA,OACA,SACA,OACA,QACM;CACN,GAAG,UAAU,SAAS,OAAO,KAAK,IAAI;CACtC,GAAG,UAAU,SAAS,SAAS,KAAK,SAAS,KAAK,OAAO;CACzD,GAAG,UAAU,SAAS,UAAU,OAAO;CACvC,GAAG,UAAU,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM;CAC1D,GAAG,UAAU,SAAS,MAAM,MAAM,GAAG;CACrC,GAAG,UAAU,SAAS,QAAQ,KAAK;CACnC,GAAG,UAAU,SAAS,SAAS,MAAM;AACvC"}

package/dist/shared/grid-webgl.d.cts

@@ -0,0 +1,10 @@
+import type { Frame } from '../core/style.cjs';
+import { type Grid } from './grid.cjs';
+/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */
+export declare const GRID_UNIFORMS: readonly ['uCols', 'uOrigin', 'uSpacing', 'uViewport', 'uDpr', 'uClock', 'uJitter'];
+/**
+ * Vertex-shader preamble for the grid styles, which draw one GL point per mark.
+ * Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.
+ */
+export declare const GRID_VERTEX_GLSL: string;
+export declare function setGridUniforms(gl: WebGL2RenderingContext, uniforms: Record<(typeof GRID_UNIFORMS)[number], WebGLUniformLocation | null>, grid: Grid, frame: Frame, spacing: number, clock: number, jitter: number): void;

package/dist/shared/grid-webgl.d.ts

@@ -0,0 +1,10 @@
+import type { Frame } from '../core/style.js';
+import { type Grid } from './grid.js';
+/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */
+export declare const GRID_UNIFORMS: readonly ['uCols', 'uOrigin', 'uSpacing', 'uViewport', 'uDpr', 'uClock', 'uJitter'];
+/**
+ * Vertex-shader preamble for the grid styles, which draw one GL point per mark.
+ * Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.
+ */
+export declare const GRID_VERTEX_GLSL: string;
+export declare function setGridUniforms(gl: WebGL2RenderingContext, uniforms: Record<(typeof GRID_UNIFORMS)[number], WebGLUniformLocation | null>, grid: Grid, frame: Frame, spacing: number, clock: number, jitter: number): void;

package/dist/shared/grid-webgl.js

@@ -0,0 +1,61 @@
+import { TAU } from "./grid.js";
+// src/shared/grid-webgl.ts
+/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */
+var GRID_UNIFORMS = [
+	"uCols",
+	"uOrigin",
+	"uSpacing",
+	"uViewport",
+	"uDpr",
+	"uClock",
+	"uJitter"
+];
+/**
+* Vertex-shader preamble for the grid styles, which draw one GL point per mark.
+* Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.
+*/
+var GRID_VERTEX_GLSL = `
+uniform int uCols;
+uniform vec2 uOrigin;         // CSS px of mark (0, 0)
+uniform float uSpacing;
+uniform vec2 uViewport;       // canvas size in CSS px
+uniform float uDpr;
+uniform float uClock;         // wander phase, radians
+uniform float uJitter;
+
+float phase(vec2 ij, float salt) {
+  return fract(sin(ij.x * 12.9898 + ij.y * 78.233 + salt) * 43758.5453) * ${TAU.toFixed(6)};
+}
+
+// This vertex's mark as (column, row). Integer maths: float division can put the first
+// mark of a row at the end of the previous one on some GPUs.
+vec2 markCell() {
+  return vec2(float(gl_VertexID % uCols), float(gl_VertexID / uCols));
+}
+
+vec2 restPosition(vec2 ij) {
+  return uOrigin + ij * uSpacing;
+}
+
+vec2 wander(vec2 ij) {
+  return uJitter * vec2(sin(uClock + phase(ij, 0.0)), cos(uClock * 1.3 + phase(ij, 1.0)));
+}
+
+// CSS px (origin top left) to clip space.
+vec4 toClip(vec2 p) {
+  vec2 clip = p / uViewport * 2.0 - 1.0;
+  return vec4(clip.x, -clip.y, 0.0, 1.0);
+}
+`;
+function setGridUniforms(gl, uniforms, grid, frame, spacing, clock, jitter) {
+	gl.uniform1i(uniforms.uCols, grid.cols);
+	gl.uniform2f(uniforms.uOrigin, grid.originX, grid.originY);
+	gl.uniform1f(uniforms.uSpacing, spacing);
+	gl.uniform2f(uniforms.uViewport, frame.width, frame.height);
+	gl.uniform1f(uniforms.uDpr, frame.dpr);
+	gl.uniform1f(uniforms.uClock, clock);
+	gl.uniform1f(uniforms.uJitter, jitter);
+}
+export { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms };
+
+//# sourceMappingURL=grid-webgl.js.map

package/dist/shared/grid-webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-webgl.js","names":[],"sources":["../../src/shared/grid-webgl.ts"],"sourcesContent":["import type { Frame } from '../core/style';\nimport { TAU, type Grid } from './grid';\n\n/** The uniforms GRID_VERTEX_GLSL declares; set them with setGridUniforms(). */\nexport const GRID_UNIFORMS = ['uCols', 'uOrigin', 'uSpacing', 'uViewport', 'uDpr', 'uClock', 'uJitter'] as const;\n\n/**\n * Vertex-shader preamble for the grid styles, which draw one GL point per mark.\n * Mirrors gridLayout, cellPhase and the wander in grid.ts; keep them in step.\n */\nexport const GRID_VERTEX_GLSL = `\nuniform int uCols;\nuniform vec2 uOrigin;         // CSS px of mark (0, 0)\nuniform float uSpacing;\nuniform vec2 uViewport;       // canvas size in CSS px\nuniform float uDpr;\nuniform float uClock;         // wander phase, radians\nuniform float uJitter;\n\nfloat phase(vec2 ij, float salt) {\n  return fract(sin(ij.x * 12.9898 + ij.y * 78.233 + salt) * 43758.5453) * ${TAU.toFixed(6)};\n}\n\n// This vertex's mark as (column, row). Integer maths: float division can put the first\n// mark of a row at the end of the previous one on some GPUs.\nvec2 markCell() {\n  return vec2(float(gl_VertexID % uCols), float(gl_VertexID / uCols));\n}\n\nvec2 restPosition(vec2 ij) {\n  return uOrigin + ij * uSpacing;\n}\n\nvec2 wander(vec2 ij) {\n  return uJitter * vec2(sin(uClock + phase(ij, 0.0)), cos(uClock * 1.3 + phase(ij, 1.0)));\n}\n\n// CSS px (origin top left) to clip space.\nvec4 toClip(vec2 p) {\n  vec2 clip = p / uViewport * 2.0 - 1.0;\n  return vec4(clip.x, -clip.y, 0.0, 1.0);\n}\n`;\n\nexport function setGridUniforms(\n  gl: WebGL2RenderingContext,\n  uniforms: Record<(typeof GRID_UNIFORMS)[number], WebGLUniformLocation | null>,\n  grid: Grid,\n  frame: Frame,\n  spacing: number,\n  clock: number,\n  jitter: number,\n): void {\n  gl.uniform1i(uniforms.uCols, grid.cols);\n  gl.uniform2f(uniforms.uOrigin, grid.originX, grid.originY);\n  gl.uniform1f(uniforms.uSpacing, spacing);\n  gl.uniform2f(uniforms.uViewport, frame.width, frame.height);\n  gl.uniform1f(uniforms.uDpr, frame.dpr);\n  gl.uniform1f(uniforms.uClock, clock);\n  gl.uniform1f(uniforms.uJitter, jitter);\n}\n"],"mappings":";;;AAIA,IAAa,gBAAgB;CAAC;CAAS;CAAW;CAAY;CAAa;CAAQ;CAAU;AAAS;;;;;AAMtG,IAAa,mBAAmB;;;;;;;;;;4EAU4C,IAAI,QAAQ,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAwB3F,SAAgB,gBACd,IACA,UACA,MACA,OACA,SACA,OACA,QACM;CACN,GAAG,UAAU,SAAS,OAAO,KAAK,IAAI;CACtC,GAAG,UAAU,SAAS,SAAS,KAAK,SAAS,KAAK,OAAO;CACzD,GAAG,UAAU,SAAS,UAAU,OAAO;CACvC,GAAG,UAAU,SAAS,WAAW,MAAM,OAAO,MAAM,MAAM;CAC1D,GAAG,UAAU,SAAS,MAAM,MAAM,GAAG;CACrC,GAAG,UAAU,SAAS,QAAQ,KAAK;CACnC,GAAG,UAAU,SAAS,SAAS,MAAM;AACvC"}

package/dist/shared/grid.cjs

@@ -0,0 +1,133 @@
+// src/shared/grid.ts
+var TAU = Math.PI * 2;
+/**
+* A grid that fits inside the canvas, centred, leaving at least half a
+* `spacing` of padding on every side so marks at the edges are never clipped.
+* Any space left over is shared equally between opposite sides. A canvas too
+* small for the padding still gets one mark, in its centre.
+*/
+function gridLayout(width, height, spacing) {
+	const cols = Math.max(1, Math.floor(width / spacing));
+	const rows = Math.max(1, Math.floor(height / spacing));
+	return {
+		cols,
+		rows,
+		originX: (width - (cols - 1) * spacing) / 2,
+		originY: (height - (rows - 1) * spacing) / 2
+	};
+}
+/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */
+function cellPhase(i, j, salt) {
+	const s = Math.sin(i * 12.9898 + j * 78.233 + salt) * 43758.5453;
+	return (s - Math.floor(s)) * TAU;
+}
+/**
+* Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,
+* recomputed only when the grid changes size. The wander offset is
+* `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.
+*/
+function createPhaseCache() {
+	let phases = /* @__PURE__ */ new Float32Array(0);
+	let phaseCols = 0;
+	return (cols, rows) => {
+		if (phaseCols === cols && phases.length === cols * rows * 4) return phases;
+		phases = new Float32Array(cols * rows * 4);
+		for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
+			const k = (j * cols + i) * 4;
+			const px = cellPhase(i, j, 0);
+			const py = cellPhase(i, j, 1);
+			phases[k] = Math.cos(px);
+			phases[k + 1] = Math.sin(px);
+			phases[k + 2] = Math.cos(py);
+			phases[k + 3] = Math.sin(py);
+		}
+		phaseCols = cols;
+		return phases;
+	};
+}
+/**
+* The trig of the wander clock for one frame. With a mark's cached phases
+* (createPhaseCache), its offset is
+*   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)
+*   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)
+* so a frame needs four trig calls in all instead of two per mark.
+*/
+function wanderClock(clock) {
+	return {
+		sx: Math.sin(clock),
+		cx: Math.cos(clock),
+		sy: Math.sin(clock * 1.3),
+		cy: Math.cos(clock * 1.3)
+	};
+}
+/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */
+function pointerFalloff(distance, radius) {
+	const k = Math.max(0, 1 - distance / radius);
+	return k * k;
+}
+/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */
+function waveRing(distance, ringRadius, width) {
+	const x = (distance - ringRadius) / width;
+	return Math.exp(-x * x);
+}
+/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */
+function waveEnvelope(age, duration) {
+	const k = Math.max(0, 1 - age / duration);
+	return k * k;
+}
+/** The wander moves each mark at most this far between frames, in CSS pixels; finer steps can't be seen. */
+var WANDER_STEP = .25;
+/**
+* Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark
+* wanders is along y: amplitude × angular speed × 1.3.
+*/
+function wanderFps(jitter, jitterSpeed) {
+	const maxSpeed = jitter * jitterSpeed * TAU * 1.3;
+	return Math.ceil(maxSpeed / WANDER_STEP);
+}
+/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */
+function wanderIdleFps(options) {
+	return Math.max(5, wanderFps(options.jitter, options.jitterSpeed));
+}
+function createWaveList() {
+	const waves = [];
+	return {
+		waves,
+		advance(frame, duration, enabled) {
+			for (const wave of waves) wave.age += frame.dt;
+			for (let k = waves.length - 1; k >= 0; k--) if (waves[k].age >= duration) waves.splice(k, 1);
+			if (!enabled) return;
+			for (const click of frame.clicks) {
+				if (waves.length === 8) waves.shift();
+				waves.push({
+					x: click.x,
+					y: click.y,
+					age: 0
+				});
+			}
+		},
+		pack(out, speed, duration) {
+			out.fill(0);
+			for (let k = 0; k < waves.length; k++) {
+				const wave = waves[k];
+				out[k * 4] = wave.x;
+				out[k * 4 + 1] = wave.y;
+				out[k * 4 + 2] = speed * wave.age;
+				out[k * 4 + 3] = waveEnvelope(wave.age, duration);
+			}
+		}
+	};
+}
+exports.TAU = TAU;
+exports.cellPhase = cellPhase;
+exports.createPhaseCache = createPhaseCache;
+exports.createWaveList = createWaveList;
+exports.gridLayout = gridLayout;
+exports.pointerFalloff = pointerFalloff;
+exports.wanderClock = wanderClock;
+exports.wanderFps = wanderFps;
+exports.wanderIdleFps = wanderIdleFps;
+exports.waveEnvelope = waveEnvelope;
+exports.waveRing = waveRing;
+
+//# sourceMappingURL=grid.cjs.map

package/dist/shared/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":[],"sources":["../../src/shared/grid.ts"],"sourcesContent":["import type { Frame } from '../core/style';\n\n// The motion model shared by the grid styles (dots, plus): a grid of marks that\n// wander around their places, react to the pointer and to click waves. The\n// WebGL vertex shaders mirror parts of it in GLSL (grid-webgl.ts); keep them in step.\n\nexport const TAU = Math.PI * 2;\n\n/** At most this many waves play at once; a new click replaces the oldest. */\nexport const MAX_WAVES = 8;\n\nexport interface Grid {\n  cols: number;\n  rows: number;\n  /** Position of mark (0, 0), in CSS pixels. */\n  originX: number;\n  originY: number;\n}\n\n/**\n * A grid that fits inside the canvas, centred, leaving at least half a\n * `spacing` of padding on every side so marks at the edges are never clipped.\n * Any space left over is shared equally between opposite sides. A canvas too\n * small for the padding still gets one mark, in its centre.\n */\nexport function gridLayout(width: number, height: number, spacing: number): Grid {\n  const cols = Math.max(1, Math.floor(width / spacing));\n  const rows = Math.max(1, Math.floor(height / spacing));\n  return {\n    cols,\n    rows,\n    originX: (width - (cols - 1) * spacing) / 2,\n    originY: (height - (rows - 1) * spacing) / 2,\n  };\n}\n\n/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */\nexport function cellPhase(i: number, j: number, salt: number): number {\n  const s = Math.sin(i * 12.9898 + j * 78.233 + salt) * 43758.5453;\n  return (s - Math.floor(s)) * TAU;\n}\n\n/**\n * Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,\n * recomputed only when the grid changes size. The wander offset is\n * `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.\n */\nexport function createPhaseCache(): (cols: number, rows: number) => Float32Array {\n  let phases = new Float32Array(0);\n  let phaseCols = 0;\n  return (cols, rows) => {\n    if (phaseCols === cols && phases.length === cols * rows * 4) return phases;\n    phases = new Float32Array(cols * rows * 4);\n    for (let j = 0; j < rows; j++) {\n      for (let i = 0; i < cols; i++) {\n        const k = (j * cols + i) * 4;\n        const px = cellPhase(i, j, 0);\n        const py = cellPhase(i, j, 1);\n        phases[k] = Math.cos(px);\n        phases[k + 1] = Math.sin(px);\n        phases[k + 2] = Math.cos(py);\n        phases[k + 3] = Math.sin(py);\n      }\n    }\n    phaseCols = cols;\n    return phases;\n  };\n}\n\n/**\n * The trig of the wander clock for one frame. With a mark's cached phases\n * (createPhaseCache), its offset is\n *   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)\n *   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)\n * so a frame needs four trig calls in all instead of two per mark.\n */\nexport function wanderClock(clock: number): { sx: number; cx: number; sy: number; cy: number } {\n  return { sx: Math.sin(clock), cx: Math.cos(clock), sy: Math.sin(clock * 1.3), cy: Math.cos(clock * 1.3) };\n}\n\n/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */\nexport function pointerFalloff(distance: number, radius: number): number {\n  const k = Math.max(0, 1 - distance / radius);\n  return k * k;\n}\n\n/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */\nexport function waveRing(distance: number, ringRadius: number, width: number): number {\n  const x = (distance - ringRadius) / width;\n  return Math.exp(-x * x);\n}\n\n/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */\nexport function waveEnvelope(age: number, duration: number): number {\n  const k = Math.max(0, 1 - age / duration);\n  return k * k;\n}\n\n/** The wander moves each mark at most this far between frames, in CSS pixels; finer steps can't be seen. */\nconst WANDER_STEP = 0.25;\n\n/**\n * Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark\n * wanders is along y: amplitude × angular speed × 1.3.\n */\nexport function wanderFps(jitter: number, jitterSpeed: number): number {\n  const maxSpeed = jitter * jitterSpeed * TAU * 1.3;\n  return Math.ceil(maxSpeed / WANDER_STEP);\n}\n\n/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */\nexport function wanderIdleFps(options: { jitter: number; jitterSpeed: number }): number {\n  return Math.max(5, wanderFps(options.jitter, options.jitterSpeed));\n}\n\nexport interface Wave {\n  x: number;\n  y: number;\n  age: number;\n}\n\n/** The click waves currently playing. */\nexport interface WaveList {\n  readonly waves: readonly Wave[];\n  /**\n   * Start waves for this frame's clicks (unless `enabled` is false), age the\n   * rest, and drop those older than `duration` seconds.\n   */\n  advance(frame: Frame, duration: number, enabled: boolean): void;\n  /** Writes each wave as x, y, ring radius, envelope into `out` (MAX_WAVES × 4), zeroing unused slots. */\n  pack(out: Float32Array, speed: number, duration: number): void;\n}\n\nexport function createWaveList(): WaveList {\n  const waves: Wave[] = [];\n  return {\n    waves,\n    advance(frame, duration, enabled) {\n      for (const wave of waves) wave.age += frame.dt;\n      for (let k = waves.length - 1; k >= 0; k--) {\n        if (waves[k].age >= duration) waves.splice(k, 1);\n      }\n      if (!enabled) return;\n      for (const click of frame.clicks) {\n        if (waves.length === MAX_WAVES) waves.shift();\n        waves.push({ x: click.x, y: click.y, age: 0 });\n      }\n    },\n    pack(out, speed, duration) {\n      out.fill(0);\n      for (let k = 0; k < waves.length; k++) {\n        const wave = waves[k];\n        out[k * 4] = wave.x;\n        out[k * 4 + 1] = wave.y;\n        out[k * 4 + 2] = speed * wave.age;\n        out[k * 4 + 3] = waveEnvelope(wave.age, duration);\n      }\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/shared/grid.d.cts

@@ -0,0 +1,72 @@
+import type { Frame } from '../core/style.cjs';
+export declare const TAU: number;
+/** At most this many waves play at once; a new click replaces the oldest. */
+export declare const MAX_WAVES = 8;
+export interface Grid {
+    cols: number;
+    rows: number;
+    /** Position of mark (0, 0), in CSS pixels. */
+    originX: number;
+    originY: number;
+}
+/**
+ * A grid that fits inside the canvas, centred, leaving at least half a
+ * `spacing` of padding on every side so marks at the edges are never clipped.
+ * Any space left over is shared equally between opposite sides. A canvas too
+ * small for the padding still gets one mark, in its centre.
+ */
+export declare function gridLayout(width: number, height: number, spacing: number): Grid;
+/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */
+export declare function cellPhase(i: number, j: number, salt: number): number;
+/**
+ * Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,
+ * recomputed only when the grid changes size. The wander offset is
+ * `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.
+ */
+export declare function createPhaseCache(): (cols: number, rows: number) => Float32Array;
+/**
+ * The trig of the wander clock for one frame. With a mark's cached phases
+ * (createPhaseCache), its offset is
+ *   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)
+ *   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)
+ * so a frame needs four trig calls in all instead of two per mark.
+ */
+export declare function wanderClock(clock: number): {
+    sx: number;
+    cx: number;
+    sy: number;
+    cy: number;
+};
+/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */
+export declare function pointerFalloff(distance: number, radius: number): number;
+/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */
+export declare function waveRing(distance: number, ringRadius: number, width: number): number;
+/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */
+export declare function waveEnvelope(age: number, duration: number): number;
+/**
+ * Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark
+ * wanders is along y: amplitude × angular speed × 1.3.
+ */
+export declare function wanderFps(jitter: number, jitterSpeed: number): number;
+/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */
+export declare function wanderIdleFps(options: {
+    jitter: number;
+    jitterSpeed: number;
+}): number;
+export interface Wave {
+    x: number;
+    y: number;
+    age: number;
+}
+/** The click waves currently playing. */
+export interface WaveList {
+    readonly waves: readonly Wave[];
+    /**
+     * Start waves for this frame's clicks (unless `enabled` is false), age the
+     * rest, and drop those older than `duration` seconds.
+     */
+    advance(frame: Frame, duration: number, enabled: boolean): void;
+    /** Writes each wave as x, y, ring radius, envelope into `out` (MAX_WAVES × 4), zeroing unused slots. */
+    pack(out: Float32Array, speed: number, duration: number): void;
+}
+export declare function createWaveList(): WaveList;

package/dist/shared/grid.d.ts

@@ -0,0 +1,72 @@
+import type { Frame } from '../core/style.js';
+export declare const TAU: number;
+/** At most this many waves play at once; a new click replaces the oldest. */
+export declare const MAX_WAVES = 8;
+export interface Grid {
+    cols: number;
+    rows: number;
+    /** Position of mark (0, 0), in CSS pixels. */
+    originX: number;
+    originY: number;
+}
+/**
+ * A grid that fits inside the canvas, centred, leaving at least half a
+ * `spacing` of padding on every side so marks at the edges are never clipped.
+ * Any space left over is shared equally between opposite sides. A canvas too
+ * small for the padding still gets one mark, in its centre.
+ */
+export declare function gridLayout(width: number, height: number, spacing: number): Grid;
+/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */
+export declare function cellPhase(i: number, j: number, salt: number): number;
+/**
+ * Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,
+ * recomputed only when the grid changes size. The wander offset is
+ * `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.
+ */
+export declare function createPhaseCache(): (cols: number, rows: number) => Float32Array;
+/**
+ * The trig of the wander clock for one frame. With a mark's cached phases
+ * (createPhaseCache), its offset is
+ *   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)
+ *   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)
+ * so a frame needs four trig calls in all instead of two per mark.
+ */
+export declare function wanderClock(clock: number): {
+    sx: number;
+    cx: number;
+    sy: number;
+    cy: number;
+};
+/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */
+export declare function pointerFalloff(distance: number, radius: number): number;
+/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */
+export declare function waveRing(distance: number, ringRadius: number, width: number): number;
+/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */
+export declare function waveEnvelope(age: number, duration: number): number;
+/**
+ * Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark
+ * wanders is along y: amplitude × angular speed × 1.3.
+ */
+export declare function wanderFps(jitter: number, jitterSpeed: number): number;
+/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */
+export declare function wanderIdleFps(options: {
+    jitter: number;
+    jitterSpeed: number;
+}): number;
+export interface Wave {
+    x: number;
+    y: number;
+    age: number;
+}
+/** The click waves currently playing. */
+export interface WaveList {
+    readonly waves: readonly Wave[];
+    /**
+     * Start waves for this frame's clicks (unless `enabled` is false), age the
+     * rest, and drop those older than `duration` seconds.
+     */
+    advance(frame: Frame, duration: number, enabled: boolean): void;
+    /** Writes each wave as x, y, ring radius, envelope into `out` (MAX_WAVES × 4), zeroing unused slots. */
+    pack(out: Float32Array, speed: number, duration: number): void;
+}
+export declare function createWaveList(): WaveList;

package/dist/shared/grid.js

@@ -0,0 +1,123 @@
+// src/shared/grid.ts
+var TAU = Math.PI * 2;
+/**
+* A grid that fits inside the canvas, centred, leaving at least half a
+* `spacing` of padding on every side so marks at the edges are never clipped.
+* Any space left over is shared equally between opposite sides. A canvas too
+* small for the padding still gets one mark, in its centre.
+*/
+function gridLayout(width, height, spacing) {
+	const cols = Math.max(1, Math.floor(width / spacing));
+	const rows = Math.max(1, Math.floor(height / spacing));
+	return {
+		cols,
+		rows,
+		originX: (width - (cols - 1) * spacing) / 2,
+		originY: (height - (rows - 1) * spacing) / 2
+	};
+}
+/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */
+function cellPhase(i, j, salt) {
+	const s = Math.sin(i * 12.9898 + j * 78.233 + salt) * 43758.5453;
+	return (s - Math.floor(s)) * TAU;
+}
+/**
+* Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,
+* recomputed only when the grid changes size. The wander offset is
+* `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.
+*/
+function createPhaseCache() {
+	let phases = /* @__PURE__ */ new Float32Array(0);
+	let phaseCols = 0;
+	return (cols, rows) => {
+		if (phaseCols === cols && phases.length === cols * rows * 4) return phases;
+		phases = new Float32Array(cols * rows * 4);
+		for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
+			const k = (j * cols + i) * 4;
+			const px = cellPhase(i, j, 0);
+			const py = cellPhase(i, j, 1);
+			phases[k] = Math.cos(px);
+			phases[k + 1] = Math.sin(px);
+			phases[k + 2] = Math.cos(py);
+			phases[k + 3] = Math.sin(py);
+		}
+		phaseCols = cols;
+		return phases;
+	};
+}
+/**
+* The trig of the wander clock for one frame. With a mark's cached phases
+* (createPhaseCache), its offset is
+*   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)
+*   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)
+* so a frame needs four trig calls in all instead of two per mark.
+*/
+function wanderClock(clock) {
+	return {
+		sx: Math.sin(clock),
+		cx: Math.cos(clock),
+		sy: Math.sin(clock * 1.3),
+		cy: Math.cos(clock * 1.3)
+	};
+}
+/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */
+function pointerFalloff(distance, radius) {
+	const k = Math.max(0, 1 - distance / radius);
+	return k * k;
+}
+/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */
+function waveRing(distance, ringRadius, width) {
+	const x = (distance - ringRadius) / width;
+	return Math.exp(-x * x);
+}
+/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */
+function waveEnvelope(age, duration) {
+	const k = Math.max(0, 1 - age / duration);
+	return k * k;
+}
+/** The wander moves each mark at most this far between frames, in CSS pixels; finer steps can't be seen. */
+var WANDER_STEP = .25;
+/**
+* Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark
+* wanders is along y: amplitude × angular speed × 1.3.
+*/
+function wanderFps(jitter, jitterSpeed) {
+	const maxSpeed = jitter * jitterSpeed * TAU * 1.3;
+	return Math.ceil(maxSpeed / WANDER_STEP);
+}
+/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */
+function wanderIdleFps(options) {
+	return Math.max(5, wanderFps(options.jitter, options.jitterSpeed));
+}
+function createWaveList() {
+	const waves = [];
+	return {
+		waves,
+		advance(frame, duration, enabled) {
+			for (const wave of waves) wave.age += frame.dt;
+			for (let k = waves.length - 1; k >= 0; k--) if (waves[k].age >= duration) waves.splice(k, 1);
+			if (!enabled) return;
+			for (const click of frame.clicks) {
+				if (waves.length === 8) waves.shift();
+				waves.push({
+					x: click.x,
+					y: click.y,
+					age: 0
+				});
+			}
+		},
+		pack(out, speed, duration) {
+			out.fill(0);
+			for (let k = 0; k < waves.length; k++) {
+				const wave = waves[k];
+				out[k * 4] = wave.x;
+				out[k * 4 + 1] = wave.y;
+				out[k * 4 + 2] = speed * wave.age;
+				out[k * 4 + 3] = waveEnvelope(wave.age, duration);
+			}
+		}
+	};
+}
+export { TAU, cellPhase, createPhaseCache, createWaveList, gridLayout, pointerFalloff, wanderClock, wanderFps, wanderIdleFps, waveEnvelope, waveRing };
+
+//# sourceMappingURL=grid.js.map

package/dist/shared/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/shared/grid.ts"],"sourcesContent":["import type { Frame } from '../core/style';\n\n// The motion model shared by the grid styles (dots, plus): a grid of marks that\n// wander around their places, react to the pointer and to click waves. The\n// WebGL vertex shaders mirror parts of it in GLSL (grid-webgl.ts); keep them in step.\n\nexport const TAU = Math.PI * 2;\n\n/** At most this many waves play at once; a new click replaces the oldest. */\nexport const MAX_WAVES = 8;\n\nexport interface Grid {\n  cols: number;\n  rows: number;\n  /** Position of mark (0, 0), in CSS pixels. */\n  originX: number;\n  originY: number;\n}\n\n/**\n * A grid that fits inside the canvas, centred, leaving at least half a\n * `spacing` of padding on every side so marks at the edges are never clipped.\n * Any space left over is shared equally between opposite sides. A canvas too\n * small for the padding still gets one mark, in its centre.\n */\nexport function gridLayout(width: number, height: number, spacing: number): Grid {\n  const cols = Math.max(1, Math.floor(width / spacing));\n  const rows = Math.max(1, Math.floor(height / spacing));\n  return {\n    cols,\n    rows,\n    originX: (width - (cols - 1) * spacing) / 2,\n    originY: (height - (rows - 1) * spacing) / 2,\n  };\n}\n\n/** A stable pseudo-random phase in [0, 2π) for mark (i, j). */\nexport function cellPhase(i: number, j: number, salt: number): number {\n  const s = Math.sin(i * 12.9898 + j * 78.233 + salt) * 43758.5453;\n  return (s - Math.floor(s)) * TAU;\n}\n\n/**\n * Each mark's wander phases (px, py) as cos px, sin px, cos py, sin py,\n * recomputed only when the grid changes size. The wander offset is\n * `jitter × (sin(clock + px), cos(clock × 1.3 + py))`; see wanderClock.\n */\nexport function createPhaseCache(): (cols: number, rows: number) => Float32Array {\n  let phases = new Float32Array(0);\n  let phaseCols = 0;\n  return (cols, rows) => {\n    if (phaseCols === cols && phases.length === cols * rows * 4) return phases;\n    phases = new Float32Array(cols * rows * 4);\n    for (let j = 0; j < rows; j++) {\n      for (let i = 0; i < cols; i++) {\n        const k = (j * cols + i) * 4;\n        const px = cellPhase(i, j, 0);\n        const py = cellPhase(i, j, 1);\n        phases[k] = Math.cos(px);\n        phases[k + 1] = Math.sin(px);\n        phases[k + 2] = Math.cos(py);\n        phases[k + 3] = Math.sin(py);\n      }\n    }\n    phaseCols = cols;\n    return phases;\n  };\n}\n\n/**\n * The trig of the wander clock for one frame. With a mark's cached phases\n * (createPhaseCache), its offset is\n *   x = jitter × (sx × cos px + cx × sin px)   = jitter × sin(clock + px)\n *   y = jitter × (cy × cos py − sy × sin py)   = jitter × cos(clock × 1.3 + py)\n * so a frame needs four trig calls in all instead of two per mark.\n */\nexport function wanderClock(clock: number): { sx: number; cx: number; sy: number; cy: number } {\n  return { sx: Math.sin(clock), cx: Math.cos(clock), sy: Math.sin(clock * 1.3), cy: Math.cos(clock * 1.3) };\n}\n\n/** How strongly the pointer affects a mark `distance` away: 1 at the pointer, easing to 0 at `radius`. */\nexport function pointerFalloff(distance: number, radius: number): number {\n  const k = Math.max(0, 1 - distance / radius);\n  return k * k;\n}\n\n/** Height of a wave's ring at `distance` from its centre: 1 on the ring, fading over `width` either side. */\nexport function waveRing(distance: number, ringRadius: number, width: number): number {\n  const x = (distance - ringRadius) / width;\n  return Math.exp(-x * x);\n}\n\n/** How much of a wave is left at `age`: 1 when it starts, easing out to 0 at `duration`. */\nexport function waveEnvelope(age: number, duration: number): number {\n  const k = Math.max(0, 1 - age / duration);\n  return k * k;\n}\n\n/** The wander moves each mark at most this far between frames, in CSS pixels; finer steps can't be seen. */\nconst WANDER_STEP = 0.25;\n\n/**\n * Frame rate that keeps every wander step below WANDER_STEP. The fastest a mark\n * wanders is along y: amplitude × angular speed × 1.3.\n */\nexport function wanderFps(jitter: number, jitterSpeed: number): number {\n  const maxSpeed = jitter * jitterSpeed * TAU * 1.3;\n  return Math.ceil(maxSpeed / WANDER_STEP);\n}\n\n/** Idle frame rate for a wandering grid: just enough for a smooth wander, at least 5 fps. */\nexport function wanderIdleFps(options: { jitter: number; jitterSpeed: number }): number {\n  return Math.max(5, wanderFps(options.jitter, options.jitterSpeed));\n}\n\nexport interface Wave {\n  x: number;\n  y: number;\n  age: number;\n}\n\n/** The click waves currently playing. */\nexport interface WaveList {\n  readonly waves: readonly Wave[];\n  /**\n   * Start waves for this frame's clicks (unless `enabled` is false), age the\n   * rest, and drop those older than `duration` seconds.\n   */\n  advance(frame: Frame, duration: number, enabled: boolean): void;\n  /** Writes each wave as x, y, ring radius, envelope into `out` (MAX_WAVES × 4), zeroing unused slots. */\n  pack(out: Float32Array, speed: number, duration: number): void;\n}\n\nexport function createWaveList(): WaveList {\n  const waves: Wave[] = [];\n  return {\n    waves,\n    advance(frame, duration, enabled) {\n      for (const wave of waves) wave.age += frame.dt;\n      for (let k = waves.length - 1; k >= 0; k--) {\n        if (waves[k].age >= duration) waves.splice(k, 1);\n      }\n      if (!enabled) return;\n      for (const click of frame.clicks) {\n        if (waves.length === MAX_WAVES) waves.shift();\n        waves.push({ x: click.x, y: click.y, age: 0 });\n      }\n    },\n    pack(out, speed, duration) {\n      out.fill(0);\n      for (let k = 0; k < waves.length; k++) {\n        const wave = waves[k];\n        out[k * 4] = wave.x;\n        out[k * 4 + 1] = wave.y;\n        out[k * 4 + 2] = speed * wave.age;\n        out[k * 4 + 3] = waveEnvelope(wave.age, duration);\n      }\n    },\n  };\n}\n"],"mappings":"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"}