interactive-bg 0.0.0-stage → 0.1.1

package/dist/styles/plus/turns.js

@@ -0,0 +1,102 @@
+import { waveEnvelope, waveRing } from "../../shared/grid.js";
+import { facingAngle } from "./motion.js";
+// src/styles/plus/turns.ts
+var QUARTER = Math.PI / 2;
+/** A sign has finished turning once its arm tips are this close to where they're heading, in CSS pixels. */
+var SETTLED_PX = .05;
+/** The same turn, expressed within ±45° (a "+" looks the same every 90°). */
+function wrap(angle) {
+	return angle - QUARTER * Math.round(angle / QUARTER);
+}
+function createSignTurns() {
+	let data = /* @__PURE__ */ new Float32Array(0);
+	const waveData = /* @__PURE__ */ new Float32Array(32);
+	/** Work out each wave's ring radius and envelope once per frame instead of once per sign. */
+	function packWaves(waves, speed, duration) {
+		for (let k = 0; k < waves.length; k++) {
+			const wave = waves[k];
+			waveData[k * 4] = wave.x;
+			waveData[k * 4 + 1] = wave.y;
+			waveData[k * 4 + 2] = speed * wave.age;
+			waveData[k * 4 + 3] = waveEnvelope(wave.age, duration);
+		}
+	}
+	let changed = false;
+	let settling = false;
+	let lastX = NaN;
+	let lastY = NaN;
+	let lastAlign = NaN;
+	let lastOriginX = NaN;
+	let lastOriginY = NaN;
+	let lastOptions = null;
+	let hadWaves = false;
+	return {
+		get data() {
+			return data;
+		},
+		get changed() {
+			return changed;
+		},
+		get settling() {
+			return settling;
+		},
+		update(frame, options, grid, waves) {
+			const { cols, rows, originX, originY } = grid;
+			const { spacing, waveSpeed, waveWidth, waveDuration, waveAlign } = options;
+			const resized = data.length !== cols * rows * 2;
+			if (resized) data = new Float32Array(cols * rows * 2);
+			const align = options.pointerAlign * frame.pointer.influence;
+			const { x: px, y: py } = frame.pointer;
+			const unchanged = !resized && !settling && !hadWaves && waves.length === 0 && align === lastAlign && (align === 0 || px === lastX && py === lastY && originX === lastOriginX && originY === lastOriginY && options === lastOptions);
+			hadWaves = waves.length > 0;
+			if (unchanged) {
+				changed = false;
+				return;
+			}
+			lastX = px;
+			lastY = py;
+			lastAlign = align;
+			lastOriginX = originX;
+			lastOriginY = originY;
+			lastOptions = options;
+			const waveCount = waves.length;
+			packWaves(waves, waveSpeed, waveDuration);
+			const waveReach = 3 * waveWidth;
+			const settled = SETTLED_PX / options.size;
+			const ease = options.turnTime > 0 ? 1 - Math.exp(-frame.dt / options.turnTime) : 1;
+			settling = false;
+			for (let j = 0; j < rows; j++) {
+				const restY = originY + j * spacing;
+				for (let i = 0; i < cols; i++) {
+					const restX = originX + i * spacing;
+					let target = 0;
+					if (align !== 0) target = align * facingAngle(restX - px, restY - py);
+					let ring = 0;
+					for (let w = 0; w < waveCount * 4; w += 4) {
+						const dx = restX - waveData[w];
+						const dy = restY - waveData[w + 1];
+						const outer = waveData[w + 2] + waveReach;
+						if (Math.abs(dx) > outer || Math.abs(dy) > outer) continue;
+						const distance = Math.sqrt(dx * dx + dy * dy);
+						if (Math.abs(distance - waveData[w + 2]) > waveReach) continue;
+						const height = waveRing(distance, waveData[w + 2], waveWidth) * waveData[w + 3];
+						ring += height;
+						target += waveAlign * Math.min(1, height) * facingAngle(dx, dy);
+					}
+					const k = (j * cols + i) * 2;
+					const remaining = wrap(target - data[k]);
+					if (Math.abs(remaining) < settled) data[k] = wrap(target);
+					else {
+						data[k] = wrap(data[k] + remaining * ease);
+						settling = true;
+					}
+					data[k + 1] = ring;
+				}
+			}
+			changed = true;
+		}
+	};
+}
+export { createSignTurns };
+
+//# sourceMappingURL=turns.js.map

package/dist/styles/plus/turns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"turns.js","names":[],"sources":["../../../src/styles/plus/turns.ts"],"sourcesContent":["import type { Frame } from '../../core/style';\nimport { MAX_WAVES, waveEnvelope, waveRing, type Grid, type Wave } from '../../shared/grid';\nimport { facingAngle } from './motion';\nimport type { ResolvedPlusOptions } from './options';\n\nconst QUARTER = Math.PI / 2;\n/** A sign has finished turning once its arm tips are this close to where they're heading, in CSS pixels. */\nconst SETTLED_PX = 0.05;\n\n/** The same turn, expressed within ±45° (a \"+\" looks the same every 90°). */\nfunction wrap(angle: number): number {\n  return angle - QUARTER * Math.round(angle / QUARTER);\n}\n\n/**\n * Each sign's angle and wave-crest height, kept between frames so signs ease\n * towards the angle they want instead of jumping to it. Both renderers use it.\n */\nexport interface SignTurns {\n  /** Angle (radians) and wave-crest height of every sign, row-major, as pairs. */\n  readonly data: Float32Array<ArrayBuffer>;\n  /** Whether `data` changed in the last update. */\n  readonly changed: boolean;\n  /** Whether any sign is still turning towards its target. */\n  readonly settling: boolean;\n  update(frame: Frame, options: ResolvedPlusOptions, grid: Grid, waves: readonly Wave[]): void;\n}\n\nexport function createSignTurns(): SignTurns {\n  let data = new Float32Array(0);\n  const waveData = new Float32Array(MAX_WAVES * 4);\n\n  /** Work out each wave's ring radius and envelope once per frame instead of once per sign. */\n  function packWaves(waves: readonly Wave[], speed: number, duration: number): void {\n    for (let k = 0; k < waves.length; k++) {\n      const wave = waves[k];\n      waveData[k * 4] = wave.x;\n      waveData[k * 4 + 1] = wave.y;\n      waveData[k * 4 + 2] = speed * wave.age;\n      waveData[k * 4 + 3] = waveEnvelope(wave.age, duration);\n    }\n  }\n  let changed = false;\n  let settling = false;\n  // What the last update computed from: if none of it changes, neither do the angles.\n  let lastX = NaN;\n  let lastY = NaN;\n  let lastAlign = NaN;\n  let lastOriginX = NaN;\n  let lastOriginY = NaN;\n  let lastOptions: ResolvedPlusOptions | null = null;\n  let hadWaves = false;\n\n  return {\n    get data() {\n      return data;\n    },\n    get changed() {\n      return changed;\n    },\n    get settling() {\n      return settling;\n    },\n    update(frame, options, grid, waves) {\n      const { cols, rows, originX, originY } = grid;\n      const { spacing, waveSpeed, waveWidth, waveDuration, waveAlign } = options;\n      const resized = data.length !== cols * rows * 2;\n      if (resized) data = new Float32Array(cols * rows * 2);\n\n      const align = options.pointerAlign * frame.pointer.influence;\n      const { x: px, y: py } = frame.pointer;\n      // Nothing is turning and nothing it depends on has moved: the angles are already right.\n      // With no pointer, every sign is upright whatever the grid or options.\n      const unchanged =\n        !resized &&\n        !settling &&\n        !hadWaves &&\n        waves.length === 0 &&\n        align === lastAlign &&\n        (align === 0 ||\n          (px === lastX && py === lastY && originX === lastOriginX && originY === lastOriginY && options === lastOptions));\n      hadWaves = waves.length > 0;\n      if (unchanged) {\n        changed = false;\n        return;\n      }\n      lastX = px;\n      lastY = py;\n      lastAlign = align;\n      lastOriginX = originX;\n      lastOriginY = originY;\n      lastOptions = options;\n\n      // Each wave as x, y, ring radius, envelope. Further than 3 widths from its ring a wave is below e⁻⁹: skipped.\n      const waveCount = waves.length;\n      packWaves(waves, waveSpeed, waveDuration);\n      const waveReach = 3 * waveWidth;\n      const settled = SETTLED_PX / options.size;\n      const ease = options.turnTime > 0 ? 1 - Math.exp(-frame.dt / options.turnTime) : 1;\n      settling = false;\n\n      for (let j = 0; j < rows; j++) {\n        const restY = originY + j * spacing;\n        for (let i = 0; i < cols; i++) {\n          const restX = originX + i * spacing;\n\n          let target = 0;\n          // While the pointer is over the background, every sign turns to face it.\n          if (align !== 0) target = align * facingAngle(restX - px, restY - py);\n\n          let ring = 0;\n          for (let w = 0; w < waveCount * 4; w += 4) {\n            const dx = restX - waveData[w];\n            const dy = restY - waveData[w + 1];\n            const outer = waveData[w + 2] + waveReach;\n            if (Math.abs(dx) > outer || Math.abs(dy) > outer) continue;\n            const distance = Math.sqrt(dx * dx + dy * dy);\n            if (Math.abs(distance - waveData[w + 2]) > waveReach) continue;\n            const height = waveRing(distance, waveData[w + 2], waveWidth) * waveData[w + 3];\n            ring += height;\n            // On the crest, signs turn to face the click.\n            target += waveAlign * Math.min(1, height) * facingAngle(dx, dy);\n          }\n\n          // Ease towards the target the short way round, so a sign never spins more than 45°.\n          const k = (j * cols + i) * 2;\n          const remaining = wrap(target - data[k]);\n          if (Math.abs(remaining) < settled) {\n            data[k] = wrap(target);\n          } else {\n            data[k] = wrap(data[k] + remaining * ease);\n            settling = true;\n          }\n          data[k + 1] = ring;\n        }\n      }\n      changed = true;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/plus/webgl.cjs

@@ -0,0 +1,121 @@
+const require_color = require("../../core/color.cjs");
+const require_webgl = require("../../core/webgl.cjs");
+const require_grid = require("../../shared/grid.cjs");
+const require_grid_webgl = require("../../shared/grid-webgl.cjs");
+const require_options = require("./options.cjs");
+const require_turns = require("./turns.cjs");
+// src/styles/plus/webgl.ts
+var VERTEX = `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec2 aTurn; // angle (radians), wave-crest height
+
+${require_grid_webgl.GRID_VERTEX_GLSL}
+uniform float uSize;          // arm length, CSS px
+uniform float uWeight;        // stroke weight, CSS px
+uniform float uWaveWeight;
+
+out vec2 vAxis;               // cos, sin of the sign's angle
+out float vArm;               // device px
+out float vHalfWeight;        // device px
+out float vPointSize;         // device px
+
+void main() {
+  vec2 ij = markCell();
+  vec2 p = restPosition(ij) + wander(ij);
+
+  vAxis = vec2(cos(aTurn.x), sin(aTurn.x));
+  vArm = uSize * uDpr;
+  vHalfWeight = 0.5 * uWeight * (1.0 + uWaveWeight * min(aTurn.y, 2.0)) * uDpr;
+  vPointSize = 2.0 * (vArm + vHalfWeight) + 2.0; // room for the antialiased edge
+  gl_PointSize = vPointSize;
+  gl_Position = toClip(p);
+}`;
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec4 uColor;          // straight RGBA, opacity applied
+in vec2 vAxis;
+in float vArm;
+in float vHalfWeight;
+in float vPointSize;
+out vec4 outColor;
+
+// Distance to a round-capped arm of half-length vArm along x.
+float arm(vec2 q) {
+  return length(vec2(max(abs(q.x) - vArm, 0.0), q.y)) - vHalfWeight;
+}
+
+void main() {
+  vec2 p = (gl_PointCoord - 0.5) * vPointSize;
+  vec2 q = vec2(dot(p, vAxis), dot(p, vec2(-vAxis.y, vAxis.x))); // into the sign's frame
+  float d = min(arm(q), arm(q.yx));
+  float a = uColor.a * clamp(0.5 - d, 0.0, 1.0);
+  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	...require_grid_webgl.GRID_UNIFORMS,
+	"uSize",
+	"uWeight",
+	"uWaveWeight",
+	"uColor"
+];
+/**
+* Every sign is one GL point: the vertex shader places it and the fragment
+* shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded
+* only on frames where they changed.
+*/
+function createPlusWebGL(gl, initial) {
+	let options = require_options.resolvePlusOptions(initial);
+	const waves = require_grid.createWaveList();
+	const turns = require_turns.createSignTurns();
+	let clock = 0;
+	let uploaded = -1;
+	const program = require_webgl.createProgram(gl, VERTEX, FRAGMENT);
+	const uniforms = program ? require_webgl.getUniforms(gl, program, UNIFORMS) : null;
+	const vao = gl.createVertexArray();
+	const buffer = gl.createBuffer();
+	gl.bindVertexArray(vao);
+	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+	gl.enableVertexAttribArray(0);
+	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+	gl.bindVertexArray(null);
+	return {
+		update(next) {
+			options = require_options.resolvePlusOptions(next);
+		},
+		render(frame) {
+			if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * require_grid.TAU;
+			waves.advance(frame, options.waveDuration, require_options.wavesEnabled(options));
+			const grid = require_grid.gridLayout(frame.width, frame.height, options.spacing);
+			turns.update(frame, options, grid, waves.waves);
+			const busy = waves.waves.length > 0 || turns.settling;
+			if (!program || !uniforms) return busy;
+			const count = grid.cols * grid.rows;
+			gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+			if (uploaded !== count) {
+				gl.bufferData(gl.ARRAY_BUFFER, turns.data, gl.DYNAMIC_DRAW);
+				uploaded = count;
+			} else if (turns.changed) gl.bufferSubData(gl.ARRAY_BUFFER, 0, turns.data);
+			const color = require_color.parseColor(options.color);
+			gl.useProgram(program);
+			require_grid_webgl.setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);
+			gl.uniform1f(uniforms.uSize, options.size);
+			gl.uniform1f(uniforms.uWeight, options.weight);
+			gl.uniform1f(uniforms.uWaveWeight, options.waveWeight);
+			gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);
+			gl.bindVertexArray(vao);
+			gl.drawArrays(gl.POINTS, 0, count);
+			gl.bindVertexArray(null);
+			return busy;
+		},
+		destroy() {
+			gl.deleteProgram(program);
+			gl.deleteBuffer(buffer);
+			gl.deleteVertexArray(vao);
+		}
+	};
+}
+exports.createPlusWebGL = createPlusWebGL;
+
+//# sourceMappingURL=webgl.cjs.map

package/dist/styles/plus/webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["GRID_VERTEX_GLSL","GRID_UNIFORMS","resolvePlusOptions","createWaveList","createSignTurns","createProgram","getUniforms","TAU","wavesEnabled","gridLayout","parseColor"],"sources":["../../../src/styles/plus/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, getUniforms } from '../../core/webgl';\nimport { createWaveList, gridLayout, TAU } from '../../shared/grid';\nimport { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from '../../shared/grid-webgl';\nimport { resolvePlusOptions, wavesEnabled, type PlusOptions } from './options';\nimport { createSignTurns } from './turns';\n\n// Wander mirrors canvas2d.ts; each sign's angle and wave height come from SignTurns (aTurn).\nconst VERTEX = `#version 300 es\nprecision highp float;\n\nlayout(location = 0) in vec2 aTurn; // angle (radians), wave-crest height\n\n${GRID_VERTEX_GLSL}\nuniform float uSize;          // arm length, CSS px\nuniform float uWeight;        // stroke weight, CSS px\nuniform float uWaveWeight;\n\nout vec2 vAxis;               // cos, sin of the sign's angle\nout float vArm;               // device px\nout float vHalfWeight;        // device px\nout float vPointSize;         // device px\n\nvoid main() {\n  vec2 ij = markCell();\n  vec2 p = restPosition(ij) + wander(ij);\n\n  vAxis = vec2(cos(aTurn.x), sin(aTurn.x));\n  vArm = uSize * uDpr;\n  vHalfWeight = 0.5 * uWeight * (1.0 + uWaveWeight * min(aTurn.y, 2.0)) * uDpr;\n  vPointSize = 2.0 * (vArm + vHalfWeight) + 2.0; // room for the antialiased edge\n  gl_PointSize = vPointSize;\n  gl_Position = toClip(p);\n}`;\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec4 uColor;          // straight RGBA, opacity applied\nin vec2 vAxis;\nin float vArm;\nin float vHalfWeight;\nin float vPointSize;\nout vec4 outColor;\n\n// Distance to a round-capped arm of half-length vArm along x.\nfloat arm(vec2 q) {\n  return length(vec2(max(abs(q.x) - vArm, 0.0), q.y)) - vHalfWeight;\n}\n\nvoid main() {\n  vec2 p = (gl_PointCoord - 0.5) * vPointSize;\n  vec2 q = vec2(dot(p, vAxis), dot(p, vec2(-vAxis.y, vAxis.x))); // into the sign's frame\n  float d = min(arm(q), arm(q.yx));\n  float a = uColor.a * clamp(0.5 - d, 0.0, 1.0);\n  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [...GRID_UNIFORMS, 'uSize', 'uWeight', 'uWaveWeight', 'uColor'] as const;\n\n/**\n * Every sign is one GL point: the vertex shader places it and the fragment\n * shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded\n * only on frames where they changed.\n */\nexport function createPlusWebGL(gl: WebGL2RenderingContext, initial: PlusOptions): StyleRenderer<PlusOptions> {\n  let options = resolvePlusOptions(initial);\n  const waves = createWaveList();\n  const turns = createSignTurns();\n  let clock = 0;\n  let uploaded = -1; // sign count the buffer was last sized for\n\n  const program = createProgram(gl, VERTEX, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n  const vao = gl.createVertexArray();\n  const buffer = gl.createBuffer();\n  gl.bindVertexArray(vao);\n  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n  gl.enableVertexAttribArray(0);\n  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);\n  gl.bindVertexArray(null);\n\n  return {\n    update(next) {\n      options = resolvePlusOptions(next);\n    },\n    render(frame) {\n      if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;\n      waves.advance(frame, options.waveDuration, wavesEnabled(options));\n      const grid = gridLayout(frame.width, frame.height, options.spacing);\n      turns.update(frame, options, grid, waves.waves);\n      const busy = waves.waves.length > 0 || turns.settling;\n      if (!program || !uniforms) return busy; // context lost during setup\n\n      const count = grid.cols * grid.rows;\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      if (uploaded !== count) {\n        gl.bufferData(gl.ARRAY_BUFFER, turns.data, gl.DYNAMIC_DRAW);\n        uploaded = count;\n      } else if (turns.changed) {\n        gl.bufferSubData(gl.ARRAY_BUFFER, 0, turns.data);\n      }\n\n      const color = parseColor(options.color);\n      gl.useProgram(program);\n      setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);\n      gl.uniform1f(uniforms.uSize, options.size);\n      gl.uniform1f(uniforms.uWeight, options.weight);\n      gl.uniform1f(uniforms.uWaveWeight, options.waveWeight);\n      gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);\n      gl.bindVertexArray(vao);\n      gl.drawArrays(gl.POINTS, 0, count);\n      gl.bindVertexArray(null);\n      return busy;\n    },\n    destroy() {\n      gl.deleteProgram(program);\n      gl.deleteBuffer(buffer);\n      gl.deleteVertexArray(vao);\n    },\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAM,SAAS;;;;;EAKbA,mBAAAA,iBAAiB;;;;;;;;;;;;;;;;;;;;;AAsBnB,IAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;AAuBjB,IAAM,WAAW;CAAC,GAAGC,mBAAAA;CAAe;CAAS;CAAW;CAAe;AAAQ;;;;;;AAO/E,SAAgB,gBAAgB,IAA4B,SAAkD;CAC5G,IAAI,UAAUC,gBAAAA,mBAAmB,OAAO;CACxC,MAAM,QAAQC,aAAAA,eAAe;CAC7B,MAAM,QAAQC,cAAAA,gBAAgB;CAC9B,IAAI,QAAQ;CACZ,IAAI,WAAW;CAEf,MAAM,UAAUC,cAAAA,cAAc,IAAI,QAAQ,QAAQ;CAClD,MAAM,WAAW,UAAUC,cAAAA,YAAY,IAAI,SAAS,QAAQ,IAAI;CAChE,MAAM,MAAM,GAAG,kBAAkB;CACjC,MAAM,SAAS,GAAG,aAAa;CAC/B,GAAG,gBAAgB,GAAG;CACtB,GAAG,WAAW,GAAG,cAAc,MAAM;CACrC,GAAG,wBAAwB,CAAC;CAC5B,GAAG,oBAAoB,GAAG,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC;CAClD,GAAG,gBAAgB,IAAI;CAEvB,OAAO;EACL,OAAO,MAAM;GACX,UAAUJ,gBAAAA,mBAAmB,IAAI;EACnC;EACA,OAAO,OAAO;GACZ,IAAI,CAAC,MAAM,eAAe,SAAS,MAAM,KAAK,QAAQ,cAAcK,aAAAA;GACpE,MAAM,QAAQ,OAAO,QAAQ,cAAcC,gBAAAA,aAAa,OAAO,CAAC;GAChE,MAAM,OAAOC,aAAAA,WAAW,MAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO;GAClE,MAAM,OAAO,OAAO,SAAS,MAAM,MAAM,KAAK;GAC9C,MAAM,OAAO,MAAM,MAAM,SAAS,KAAK,MAAM;GAC7C,IAAI,CAAC,WAAW,CAAC,UAAU,OAAO;GAElC,MAAM,QAAQ,KAAK,OAAO,KAAK;GAC/B,GAAG,WAAW,GAAG,cAAc,MAAM;GACrC,IAAI,aAAa,OAAO;IACtB,GAAG,WAAW,GAAG,cAAc,MAAM,MAAM,GAAG,YAAY;IAC1D,WAAW;GACb,OAAO,IAAI,MAAM,SACf,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,IAAI;GAGjD,MAAM,QAAQC,cAAAA,WAAW,QAAQ,KAAK;GACtC,GAAG,WAAW,OAAO;GACrB,mBAAA,gBAAgB,IAAI,UAAU,MAAM,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM;GACjF,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,SAAS,QAAQ,MAAM;GAC7C,GAAG,UAAU,SAAS,aAAa,QAAQ,UAAU;GACrD,GAAG,UAAU,SAAS,QAAQ,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,OAAO;GACtF,GAAG,gBAAgB,GAAG;GACtB,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK;GACjC,GAAG,gBAAgB,IAAI;GACvB,OAAO;EACT;EACA,UAAU;GACR,GAAG,cAAc,OAAO;GACxB,GAAG,aAAa,MAAM;GACtB,GAAG,kBAAkB,GAAG;EAC1B;CACF;AACF"}

package/dist/styles/plus/webgl.d.cts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type PlusOptions } from './options.cjs';
+/**
+ * Every sign is one GL point: the vertex shader places it and the fragment
+ * shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded
+ * only on frames where they changed.
+ */
+export declare function createPlusWebGL(gl: WebGL2RenderingContext, initial: PlusOptions): StyleRenderer<PlusOptions>;

package/dist/styles/plus/webgl.d.ts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type PlusOptions } from './options.js';
+/**
+ * Every sign is one GL point: the vertex shader places it and the fragment
+ * shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded
+ * only on frames where they changed.
+ */
+export declare function createPlusWebGL(gl: WebGL2RenderingContext, initial: PlusOptions): StyleRenderer<PlusOptions>;

package/dist/styles/plus/webgl.js

@@ -0,0 +1,121 @@
+import { parseColor } from "../../core/color.js";
+import { createProgram, getUniforms } from "../../core/webgl.js";
+import { TAU, createWaveList, gridLayout } from "../../shared/grid.js";
+import { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from "../../shared/grid-webgl.js";
+import { resolvePlusOptions, wavesEnabled } from "./options.js";
+import { createSignTurns } from "./turns.js";
+// src/styles/plus/webgl.ts
+var VERTEX = `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec2 aTurn; // angle (radians), wave-crest height
+
+${GRID_VERTEX_GLSL}
+uniform float uSize;          // arm length, CSS px
+uniform float uWeight;        // stroke weight, CSS px
+uniform float uWaveWeight;
+
+out vec2 vAxis;               // cos, sin of the sign's angle
+out float vArm;               // device px
+out float vHalfWeight;        // device px
+out float vPointSize;         // device px
+
+void main() {
+  vec2 ij = markCell();
+  vec2 p = restPosition(ij) + wander(ij);
+
+  vAxis = vec2(cos(aTurn.x), sin(aTurn.x));
+  vArm = uSize * uDpr;
+  vHalfWeight = 0.5 * uWeight * (1.0 + uWaveWeight * min(aTurn.y, 2.0)) * uDpr;
+  vPointSize = 2.0 * (vArm + vHalfWeight) + 2.0; // room for the antialiased edge
+  gl_PointSize = vPointSize;
+  gl_Position = toClip(p);
+}`;
+var FRAGMENT = `#version 300 es
+precision highp float;
+
+uniform vec4 uColor;          // straight RGBA, opacity applied
+in vec2 vAxis;
+in float vArm;
+in float vHalfWeight;
+in float vPointSize;
+out vec4 outColor;
+
+// Distance to a round-capped arm of half-length vArm along x.
+float arm(vec2 q) {
+  return length(vec2(max(abs(q.x) - vArm, 0.0), q.y)) - vHalfWeight;
+}
+
+void main() {
+  vec2 p = (gl_PointCoord - 0.5) * vPointSize;
+  vec2 q = vec2(dot(p, vAxis), dot(p, vec2(-vAxis.y, vAxis.x))); // into the sign's frame
+  float d = min(arm(q), arm(q.yx));
+  float a = uColor.a * clamp(0.5 - d, 0.0, 1.0);
+  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background
+}`;
+var UNIFORMS = [
+	...GRID_UNIFORMS,
+	"uSize",
+	"uWeight",
+	"uWaveWeight",
+	"uColor"
+];
+/**
+* Every sign is one GL point: the vertex shader places it and the fragment
+* shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded
+* only on frames where they changed.
+*/
+function createPlusWebGL(gl, initial) {
+	let options = resolvePlusOptions(initial);
+	const waves = createWaveList();
+	const turns = createSignTurns();
+	let clock = 0;
+	let uploaded = -1;
+	const program = createProgram(gl, VERTEX, FRAGMENT);
+	const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;
+	const vao = gl.createVertexArray();
+	const buffer = gl.createBuffer();
+	gl.bindVertexArray(vao);
+	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+	gl.enableVertexAttribArray(0);
+	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+	gl.bindVertexArray(null);
+	return {
+		update(next) {
+			options = resolvePlusOptions(next);
+		},
+		render(frame) {
+			if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;
+			waves.advance(frame, options.waveDuration, wavesEnabled(options));
+			const grid = gridLayout(frame.width, frame.height, options.spacing);
+			turns.update(frame, options, grid, waves.waves);
+			const busy = waves.waves.length > 0 || turns.settling;
+			if (!program || !uniforms) return busy;
+			const count = grid.cols * grid.rows;
+			gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+			if (uploaded !== count) {
+				gl.bufferData(gl.ARRAY_BUFFER, turns.data, gl.DYNAMIC_DRAW);
+				uploaded = count;
+			} else if (turns.changed) gl.bufferSubData(gl.ARRAY_BUFFER, 0, turns.data);
+			const color = parseColor(options.color);
+			gl.useProgram(program);
+			setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);
+			gl.uniform1f(uniforms.uSize, options.size);
+			gl.uniform1f(uniforms.uWeight, options.weight);
+			gl.uniform1f(uniforms.uWaveWeight, options.waveWeight);
+			gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);
+			gl.bindVertexArray(vao);
+			gl.drawArrays(gl.POINTS, 0, count);
+			gl.bindVertexArray(null);
+			return busy;
+		},
+		destroy() {
+			gl.deleteProgram(program);
+			gl.deleteBuffer(buffer);
+			gl.deleteVertexArray(vao);
+		}
+	};
+}
+export { createPlusWebGL };
+
+//# sourceMappingURL=webgl.js.map

package/dist/styles/plus/webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../../src/styles/plus/webgl.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { StyleRenderer } from '../../core/style';\nimport { createProgram, getUniforms } from '../../core/webgl';\nimport { createWaveList, gridLayout, TAU } from '../../shared/grid';\nimport { GRID_UNIFORMS, GRID_VERTEX_GLSL, setGridUniforms } from '../../shared/grid-webgl';\nimport { resolvePlusOptions, wavesEnabled, type PlusOptions } from './options';\nimport { createSignTurns } from './turns';\n\n// Wander mirrors canvas2d.ts; each sign's angle and wave height come from SignTurns (aTurn).\nconst VERTEX = `#version 300 es\nprecision highp float;\n\nlayout(location = 0) in vec2 aTurn; // angle (radians), wave-crest height\n\n${GRID_VERTEX_GLSL}\nuniform float uSize;          // arm length, CSS px\nuniform float uWeight;        // stroke weight, CSS px\nuniform float uWaveWeight;\n\nout vec2 vAxis;               // cos, sin of the sign's angle\nout float vArm;               // device px\nout float vHalfWeight;        // device px\nout float vPointSize;         // device px\n\nvoid main() {\n  vec2 ij = markCell();\n  vec2 p = restPosition(ij) + wander(ij);\n\n  vAxis = vec2(cos(aTurn.x), sin(aTurn.x));\n  vArm = uSize * uDpr;\n  vHalfWeight = 0.5 * uWeight * (1.0 + uWaveWeight * min(aTurn.y, 2.0)) * uDpr;\n  vPointSize = 2.0 * (vArm + vHalfWeight) + 2.0; // room for the antialiased edge\n  gl_PointSize = vPointSize;\n  gl_Position = toClip(p);\n}`;\n\nconst FRAGMENT = `#version 300 es\nprecision highp float;\n\nuniform vec4 uColor;          // straight RGBA, opacity applied\nin vec2 vAxis;\nin float vArm;\nin float vHalfWeight;\nin float vPointSize;\nout vec4 outColor;\n\n// Distance to a round-capped arm of half-length vArm along x.\nfloat arm(vec2 q) {\n  return length(vec2(max(abs(q.x) - vArm, 0.0), q.y)) - vHalfWeight;\n}\n\nvoid main() {\n  vec2 p = (gl_PointCoord - 0.5) * vPointSize;\n  vec2 q = vec2(dot(p, vAxis), dot(p, vec2(-vAxis.y, vAxis.x))); // into the sign's frame\n  float d = min(arm(q), arm(q.yx));\n  float a = uColor.a * clamp(0.5 - d, 0.0, 1.0);\n  outColor = vec4(uColor.rgb * a, a); // premultiplied; the engine blends it over the background\n}`;\n\nconst UNIFORMS = [...GRID_UNIFORMS, 'uSize', 'uWeight', 'uWaveWeight', 'uColor'] as const;\n\n/**\n * Every sign is one GL point: the vertex shader places it and the fragment\n * shader draws the cross. Angles are eased on the CPU (SignTurns) and uploaded\n * only on frames where they changed.\n */\nexport function createPlusWebGL(gl: WebGL2RenderingContext, initial: PlusOptions): StyleRenderer<PlusOptions> {\n  let options = resolvePlusOptions(initial);\n  const waves = createWaveList();\n  const turns = createSignTurns();\n  let clock = 0;\n  let uploaded = -1; // sign count the buffer was last sized for\n\n  const program = createProgram(gl, VERTEX, FRAGMENT);\n  const uniforms = program ? getUniforms(gl, program, UNIFORMS) : null;\n  const vao = gl.createVertexArray();\n  const buffer = gl.createBuffer();\n  gl.bindVertexArray(vao);\n  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n  gl.enableVertexAttribArray(0);\n  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);\n  gl.bindVertexArray(null);\n\n  return {\n    update(next) {\n      options = resolvePlusOptions(next);\n    },\n    render(frame) {\n      if (!frame.reducedMotion) clock += frame.dt * options.jitterSpeed * TAU;\n      waves.advance(frame, options.waveDuration, wavesEnabled(options));\n      const grid = gridLayout(frame.width, frame.height, options.spacing);\n      turns.update(frame, options, grid, waves.waves);\n      const busy = waves.waves.length > 0 || turns.settling;\n      if (!program || !uniforms) return busy; // context lost during setup\n\n      const count = grid.cols * grid.rows;\n      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n      if (uploaded !== count) {\n        gl.bufferData(gl.ARRAY_BUFFER, turns.data, gl.DYNAMIC_DRAW);\n        uploaded = count;\n      } else if (turns.changed) {\n        gl.bufferSubData(gl.ARRAY_BUFFER, 0, turns.data);\n      }\n\n      const color = parseColor(options.color);\n      gl.useProgram(program);\n      setGridUniforms(gl, uniforms, grid, frame, options.spacing, clock, options.jitter);\n      gl.uniform1f(uniforms.uSize, options.size);\n      gl.uniform1f(uniforms.uWeight, options.weight);\n      gl.uniform1f(uniforms.uWaveWeight, options.waveWeight);\n      gl.uniform4f(uniforms.uColor, color[0], color[1], color[2], color[3] * options.opacity);\n      gl.bindVertexArray(vao);\n      gl.drawArrays(gl.POINTS, 0, count);\n      gl.bindVertexArray(null);\n      return busy;\n    },\n    destroy() {\n      gl.deleteProgram(program);\n      gl.deleteBuffer(buffer);\n      gl.deleteVertexArray(vao);\n    },\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAM,SAAS;;;;;EAKb,iBAAiB;;;;;;;;;;;;;;;;;;;;;AAsBnB,IAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;AAuBjB,IAAM,WAAW;CAAC,GAAG;CAAe;CAAS;CAAW;CAAe;AAAQ;;;;;;AAO/E,SAAgB,gBAAgB,IAA4B,SAAkD;CAC5G,IAAI,UAAU,mBAAmB,OAAO;CACxC,MAAM,QAAQ,eAAe;CAC7B,MAAM,QAAQ,gBAAgB;CAC9B,IAAI,QAAQ;CACZ,IAAI,WAAW;CAEf,MAAM,UAAU,cAAc,IAAI,QAAQ,QAAQ;CAClD,MAAM,WAAW,UAAU,YAAY,IAAI,SAAS,QAAQ,IAAI;CAChE,MAAM,MAAM,GAAG,kBAAkB;CACjC,MAAM,SAAS,GAAG,aAAa;CAC/B,GAAG,gBAAgB,GAAG;CACtB,GAAG,WAAW,GAAG,cAAc,MAAM;CACrC,GAAG,wBAAwB,CAAC;CAC5B,GAAG,oBAAoB,GAAG,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC;CAClD,GAAG,gBAAgB,IAAI;CAEvB,OAAO;EACL,OAAO,MAAM;GACX,UAAU,mBAAmB,IAAI;EACnC;EACA,OAAO,OAAO;GACZ,IAAI,CAAC,MAAM,eAAe,SAAS,MAAM,KAAK,QAAQ,cAAc;GACpE,MAAM,QAAQ,OAAO,QAAQ,cAAc,aAAa,OAAO,CAAC;GAChE,MAAM,OAAO,WAAW,MAAM,OAAO,MAAM,QAAQ,QAAQ,OAAO;GAClE,MAAM,OAAO,OAAO,SAAS,MAAM,MAAM,KAAK;GAC9C,MAAM,OAAO,MAAM,MAAM,SAAS,KAAK,MAAM;GAC7C,IAAI,CAAC,WAAW,CAAC,UAAU,OAAO;GAElC,MAAM,QAAQ,KAAK,OAAO,KAAK;GAC/B,GAAG,WAAW,GAAG,cAAc,MAAM;GACrC,IAAI,aAAa,OAAO;IACtB,GAAG,WAAW,GAAG,cAAc,MAAM,MAAM,GAAG,YAAY;IAC1D,WAAW;GACb,OAAO,IAAI,MAAM,SACf,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,IAAI;GAGjD,MAAM,QAAQ,WAAW,QAAQ,KAAK;GACtC,GAAG,WAAW,OAAO;GACrB,gBAAgB,IAAI,UAAU,MAAM,OAAO,QAAQ,SAAS,OAAO,QAAQ,MAAM;GACjF,GAAG,UAAU,SAAS,OAAO,QAAQ,IAAI;GACzC,GAAG,UAAU,SAAS,SAAS,QAAQ,MAAM;GAC7C,GAAG,UAAU,SAAS,aAAa,QAAQ,UAAU;GACrD,GAAG,UAAU,SAAS,QAAQ,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,OAAO;GACtF,GAAG,gBAAgB,GAAG;GACtB,GAAG,WAAW,GAAG,QAAQ,GAAG,KAAK;GACjC,GAAG,gBAAgB,IAAI;GACvB,OAAO;EACT;EACA,UAAU;GACR,GAAG,cAAc,OAAO;GACxB,GAAG,aAAa,MAAM;GACtB,GAAG,kBAAkB,GAAG;EAC1B;CACF;AACF"}

package/dist/styles/topo/canvas2d.cjs

@@ -0,0 +1,77 @@
+const require_buffer = require("../../shared/buffer.cjs");
+const require_contours = require("./contours.cjs");
+const require_options = require("./options.cjs");
+const require_terrain = require("./terrain.cjs");
+// src/styles/topo/canvas2d.ts
+/** Marching squares on the CPU, stroked with the Canvas 2D API. */
+function createTopoCanvas2D(ctx, initial) {
+	let options = require_options.resolveTopoOptions(initial);
+	const terrain = require_terrain.createTerrain(options);
+	let field = /* @__PURE__ */ new Float32Array(0);
+	const minor = require_buffer.createFloatBuffer(4096);
+	const major = require_buffer.createFloatBuffer(1024);
+	function collectSegment(x1, y1, x2, y2, level) {
+		const buffer = options.majorEvery > 0 && level % options.majorEvery === 0 ? major : minor;
+		const data = require_buffer.reserve(buffer, 4);
+		data[buffer.length++] = x1;
+		data[buffer.length++] = y1;
+		data[buffer.length++] = x2;
+		data[buffer.length++] = y2;
+	}
+	function stroke(buffer, color, lineWidth) {
+		const { data, length } = buffer;
+		ctx.beginPath();
+		for (let k = 0; k < length; k += 4) {
+			ctx.moveTo(data[k], data[k + 1]);
+			ctx.lineTo(data[k + 2], data[k + 3]);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = lineWidth;
+		ctx.stroke();
+	}
+	/** Blend the keyframes and add the pointer bump into `field`. */
+	function sampleField(blend, pointerX, pointerY, bump) {
+		const { cols, rows, keyA, keyB } = terrain.field;
+		const size = cols * rows;
+		if (field.length !== size) field = new Float32Array(size);
+		for (let idx = 0; idx < size; idx++) {
+			const a = keyA[idx];
+			field[idx] = a + (keyB[idx] - a) * blend;
+		}
+		if (bump === 0) return;
+		const { cellSize, pointerRadius } = options;
+		const radius2 = pointerRadius * pointerRadius;
+		const reach = 3 * pointerRadius;
+		const i0 = Math.max(0, Math.floor((pointerX - reach) / cellSize));
+		const i1 = Math.min(cols - 1, Math.ceil((pointerX + reach) / cellSize));
+		const j0 = Math.max(0, Math.floor((pointerY - reach) / cellSize));
+		const j1 = Math.min(rows - 1, Math.ceil((pointerY + reach) / cellSize));
+		for (let j = j0; j <= j1; j++) {
+			const dy = j * cellSize - pointerY;
+			for (let i = i0; i <= i1; i++) {
+				const dx = i * cellSize - pointerX;
+				field[j * cols + i] += bump * Math.exp(-(dx * dx + dy * dy) / radius2);
+			}
+		}
+	}
+	return {
+		update(next) {
+			options = require_options.resolveTopoOptions(next);
+			terrain.configure(options);
+		},
+		render(frame) {
+			const blend = terrain.advance(frame);
+			const { pointer } = frame;
+			sampleField(blend, pointer.x, pointer.y, options.pointerStrength * pointer.influence);
+			minor.length = major.length = 0;
+			const { cols, rows } = terrain.field;
+			require_contours.traceContours(field, cols, rows, options.cellSize, options.levelStep, collectSegment);
+			ctx.globalAlpha = options.lineOpacity;
+			stroke(minor, options.lineColor, options.lineWidth);
+			if (options.majorEvery > 0) stroke(major, options.majorLineColor, options.majorLineWidth);
+		}
+	};
+}
+exports.createTopoCanvas2D = createTopoCanvas2D;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/styles/topo/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["resolveTopoOptions","createTerrain","createFloatBuffer","reserve"],"sources":["../../../src/styles/topo/canvas2d.ts"],"sourcesContent":["import type { StyleRenderer } from '../../core/style';\nimport { createFloatBuffer, reserve, type FloatBuffer } from '../../shared/buffer';\nimport { traceContours } from './contours';\nimport { resolveTopoOptions, type TopoOptions } from './options';\nimport { createTerrain } from './terrain';\n\n/** Marching squares on the CPU, stroked with the Canvas 2D API. */\nexport function createTopoCanvas2D(ctx: CanvasRenderingContext2D, initial: TopoOptions): StyleRenderer<TopoOptions> {\n  let options = resolveTopoOptions(initial);\n  const terrain = createTerrain(options);\n  let field = new Float32Array(0);\n\n  // Segments are collected into reusable buffers and stroked from the context's\n  // own path, so a frame allocates nothing. Path2D objects per frame pile up as\n  // native garbage faster than the browser frees them.\n  // Line segments as x1, y1, x2, y2.\n  const minor = createFloatBuffer(4096);\n  const major = createFloatBuffer(1024);\n\n  function collectSegment(x1: number, y1: number, x2: number, y2: number, level: number): void {\n    const buffer = options.majorEvery > 0 && level % options.majorEvery === 0 ? major : minor;\n    const data = reserve(buffer, 4);\n    data[buffer.length++] = x1;\n    data[buffer.length++] = y1;\n    data[buffer.length++] = x2;\n    data[buffer.length++] = y2;\n  }\n\n  function stroke(buffer: FloatBuffer, color: string, lineWidth: number): void {\n    const { data, length } = buffer;\n    ctx.beginPath();\n    for (let k = 0; k < length; k += 4) {\n      ctx.moveTo(data[k], data[k + 1]);\n      ctx.lineTo(data[k + 2], data[k + 3]);\n    }\n    ctx.strokeStyle = color;\n    ctx.lineWidth = lineWidth;\n    ctx.stroke();\n  }\n\n  /** Blend the keyframes and add the pointer bump into `field`. */\n  function sampleField(blend: number, pointerX: number, pointerY: number, bump: number): void {\n    const { cols, rows, keyA, keyB } = terrain.field;\n    const size = cols * rows;\n    if (field.length !== size) field = new Float32Array(size);\n    for (let idx = 0; idx < size; idx++) {\n      const a = keyA[idx];\n      field[idx] = a + (keyB[idx] - a) * blend;\n    }\n\n    if (bump === 0) return;\n    const { cellSize, pointerRadius } = options;\n    const radius2 = pointerRadius * pointerRadius;\n    // Beyond 3 radii the bump adds < 0.0001, so only touch the cells around the pointer.\n    const reach = 3 * pointerRadius;\n    const i0 = Math.max(0, Math.floor((pointerX - reach) / cellSize));\n    const i1 = Math.min(cols - 1, Math.ceil((pointerX + reach) / cellSize));\n    const j0 = Math.max(0, Math.floor((pointerY - reach) / cellSize));\n    const j1 = Math.min(rows - 1, Math.ceil((pointerY + reach) / cellSize));\n    for (let j = j0; j <= j1; j++) {\n      const dy = j * cellSize - pointerY;\n      for (let i = i0; i <= i1; i++) {\n        const dx = i * cellSize - pointerX;\n        field[j * cols + i] += bump * Math.exp(-(dx * dx + dy * dy) / radius2);\n      }\n    }\n  }\n\n  return {\n    update(next) {\n      options = resolveTopoOptions(next);\n      terrain.configure(options);\n    },\n    render(frame) {\n      const blend = terrain.advance(frame);\n      const { pointer } = frame;\n      sampleField(blend, pointer.x, pointer.y, options.pointerStrength * pointer.influence);\n\n      minor.length = major.length = 0;\n      const { cols, rows } = terrain.field;\n      traceContours(field, cols, rows, options.cellSize, options.levelStep, collectSegment);\n\n      ctx.globalAlpha = options.lineOpacity;\n      stroke(minor, options.lineColor, options.lineWidth);\n      if (options.majorEvery > 0) stroke(major, options.majorLineColor, options.majorLineWidth);\n    },\n  };\n}\n"],"mappings":";;;;;;AAOA,SAAgB,mBAAmB,KAA+B,SAAkD;CAClH,IAAI,UAAUA,gBAAAA,mBAAmB,OAAO;CACxC,MAAM,UAAUC,gBAAAA,cAAc,OAAO;CACrC,IAAI,wBAAQ,IAAI,aAAa,CAAC;CAM9B,MAAM,QAAQC,eAAAA,kBAAkB,IAAI;CACpC,MAAM,QAAQA,eAAAA,kBAAkB,IAAI;CAEpC,SAAS,eAAe,IAAY,IAAY,IAAY,IAAY,OAAqB;EAC3F,MAAM,SAAS,QAAQ,aAAa,KAAK,QAAQ,QAAQ,eAAe,IAAI,QAAQ;EACpF,MAAM,OAAOC,eAAAA,QAAQ,QAAQ,CAAC;EAC9B,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;CAC1B;CAEA,SAAS,OAAO,QAAqB,OAAe,WAAyB;EAC3E,MAAM,EAAE,MAAM,WAAW;EACzB,IAAI,UAAU;EACd,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,KAAK,GAAG;GAClC,IAAI,OAAO,KAAK,IAAI,KAAK,IAAI,EAAE;GAC/B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE;EACrC;EACA,IAAI,cAAc;EAClB,IAAI,YAAY;EAChB,IAAI,OAAO;CACb;;CAGA,SAAS,YAAY,OAAe,UAAkB,UAAkB,MAAoB;EAC1F,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS,QAAQ;EAC3C,MAAM,OAAO,OAAO;EACpB,IAAI,MAAM,WAAW,MAAM,QAAQ,IAAI,aAAa,IAAI;EACxD,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,OAAO;GACnC,MAAM,IAAI,KAAK;GACf,MAAM,OAAO,KAAK,KAAK,OAAO,KAAK;EACrC;EAEA,IAAI,SAAS,GAAG;EAChB,MAAM,EAAE,UAAU,kBAAkB;EACpC,MAAM,UAAU,gBAAgB;EAEhC,MAAM,QAAQ,IAAI;EAClB,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,SAAS,QAAQ,CAAC;EAChE,MAAM,KAAK,KAAK,IAAI,OAAO,GAAG,KAAK,MAAM,WAAW,SAAS,QAAQ,CAAC;EACtE,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,SAAS,QAAQ,CAAC;EAChE,MAAM,KAAK,KAAK,IAAI,OAAO,GAAG,KAAK,MAAM,WAAW,SAAS,QAAQ,CAAC;EACtE,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK;GAC7B,MAAM,KAAK,IAAI,WAAW;GAC1B,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK;IAC7B,MAAM,KAAK,IAAI,WAAW;IAC1B,MAAM,IAAI,OAAO,MAAM,OAAO,KAAK,IAAI,EAAE,KAAK,KAAK,KAAK,MAAM,OAAO;GACvE;EACF;CACF;CAEA,OAAO;EACL,OAAO,MAAM;GACX,UAAUH,gBAAAA,mBAAmB,IAAI;GACjC,QAAQ,UAAU,OAAO;EAC3B;EACA,OAAO,OAAO;GACZ,MAAM,QAAQ,QAAQ,QAAQ,KAAK;GACnC,MAAM,EAAE,YAAY;GACpB,YAAY,OAAO,QAAQ,GAAG,QAAQ,GAAG,QAAQ,kBAAkB,QAAQ,SAAS;GAEpF,MAAM,SAAS,MAAM,SAAS;GAC9B,MAAM,EAAE,MAAM,SAAS,QAAQ;GAC/B,iBAAA,cAAc,OAAO,MAAM,MAAM,QAAQ,UAAU,QAAQ,WAAW,cAAc;GAEpF,IAAI,cAAc,QAAQ;GAC1B,OAAO,OAAO,QAAQ,WAAW,QAAQ,SAAS;GAClD,IAAI,QAAQ,aAAa,GAAG,OAAO,OAAO,QAAQ,gBAAgB,QAAQ,cAAc;EAC1F;CACF;AACF"}

package/dist/styles/topo/canvas2d.d.cts

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type TopoOptions } from './options.cjs';
+/** Marching squares on the CPU, stroked with the Canvas 2D API. */
+export declare function createTopoCanvas2D(ctx: CanvasRenderingContext2D, initial: TopoOptions): StyleRenderer<TopoOptions>;

package/dist/styles/topo/canvas2d.d.ts

@@ -0,0 +1,4 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type TopoOptions } from './options.js';
+/** Marching squares on the CPU, stroked with the Canvas 2D API. */
+export declare function createTopoCanvas2D(ctx: CanvasRenderingContext2D, initial: TopoOptions): StyleRenderer<TopoOptions>;

package/dist/styles/topo/canvas2d.js

@@ -0,0 +1,77 @@
+import { createFloatBuffer, reserve } from "../../shared/buffer.js";
+import { traceContours } from "./contours.js";
+import { resolveTopoOptions } from "./options.js";
+import { createTerrain } from "./terrain.js";
+// src/styles/topo/canvas2d.ts
+/** Marching squares on the CPU, stroked with the Canvas 2D API. */
+function createTopoCanvas2D(ctx, initial) {
+	let options = resolveTopoOptions(initial);
+	const terrain = createTerrain(options);
+	let field = /* @__PURE__ */ new Float32Array(0);
+	const minor = createFloatBuffer(4096);
+	const major = createFloatBuffer(1024);
+	function collectSegment(x1, y1, x2, y2, level) {
+		const buffer = options.majorEvery > 0 && level % options.majorEvery === 0 ? major : minor;
+		const data = reserve(buffer, 4);
+		data[buffer.length++] = x1;
+		data[buffer.length++] = y1;
+		data[buffer.length++] = x2;
+		data[buffer.length++] = y2;
+	}
+	function stroke(buffer, color, lineWidth) {
+		const { data, length } = buffer;
+		ctx.beginPath();
+		for (let k = 0; k < length; k += 4) {
+			ctx.moveTo(data[k], data[k + 1]);
+			ctx.lineTo(data[k + 2], data[k + 3]);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = lineWidth;
+		ctx.stroke();
+	}
+	/** Blend the keyframes and add the pointer bump into `field`. */
+	function sampleField(blend, pointerX, pointerY, bump) {
+		const { cols, rows, keyA, keyB } = terrain.field;
+		const size = cols * rows;
+		if (field.length !== size) field = new Float32Array(size);
+		for (let idx = 0; idx < size; idx++) {
+			const a = keyA[idx];
+			field[idx] = a + (keyB[idx] - a) * blend;
+		}
+		if (bump === 0) return;
+		const { cellSize, pointerRadius } = options;
+		const radius2 = pointerRadius * pointerRadius;
+		const reach = 3 * pointerRadius;
+		const i0 = Math.max(0, Math.floor((pointerX - reach) / cellSize));
+		const i1 = Math.min(cols - 1, Math.ceil((pointerX + reach) / cellSize));
+		const j0 = Math.max(0, Math.floor((pointerY - reach) / cellSize));
+		const j1 = Math.min(rows - 1, Math.ceil((pointerY + reach) / cellSize));
+		for (let j = j0; j <= j1; j++) {
+			const dy = j * cellSize - pointerY;
+			for (let i = i0; i <= i1; i++) {
+				const dx = i * cellSize - pointerX;
+				field[j * cols + i] += bump * Math.exp(-(dx * dx + dy * dy) / radius2);
+			}
+		}
+	}
+	return {
+		update(next) {
+			options = resolveTopoOptions(next);
+			terrain.configure(options);
+		},
+		render(frame) {
+			const blend = terrain.advance(frame);
+			const { pointer } = frame;
+			sampleField(blend, pointer.x, pointer.y, options.pointerStrength * pointer.influence);
+			minor.length = major.length = 0;
+			const { cols, rows } = terrain.field;
+			traceContours(field, cols, rows, options.cellSize, options.levelStep, collectSegment);
+			ctx.globalAlpha = options.lineOpacity;
+			stroke(minor, options.lineColor, options.lineWidth);
+			if (options.majorEvery > 0) stroke(major, options.majorLineColor, options.majorLineWidth);
+		}
+	};
+}
+export { createTopoCanvas2D };
+
+//# sourceMappingURL=canvas2d.js.map

package/dist/styles/topo/canvas2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.js","names":[],"sources":["../../../src/styles/topo/canvas2d.ts"],"sourcesContent":["import type { StyleRenderer } from '../../core/style';\nimport { createFloatBuffer, reserve, type FloatBuffer } from '../../shared/buffer';\nimport { traceContours } from './contours';\nimport { resolveTopoOptions, type TopoOptions } from './options';\nimport { createTerrain } from './terrain';\n\n/** Marching squares on the CPU, stroked with the Canvas 2D API. */\nexport function createTopoCanvas2D(ctx: CanvasRenderingContext2D, initial: TopoOptions): StyleRenderer<TopoOptions> {\n  let options = resolveTopoOptions(initial);\n  const terrain = createTerrain(options);\n  let field = new Float32Array(0);\n\n  // Segments are collected into reusable buffers and stroked from the context's\n  // own path, so a frame allocates nothing. Path2D objects per frame pile up as\n  // native garbage faster than the browser frees them.\n  // Line segments as x1, y1, x2, y2.\n  const minor = createFloatBuffer(4096);\n  const major = createFloatBuffer(1024);\n\n  function collectSegment(x1: number, y1: number, x2: number, y2: number, level: number): void {\n    const buffer = options.majorEvery > 0 && level % options.majorEvery === 0 ? major : minor;\n    const data = reserve(buffer, 4);\n    data[buffer.length++] = x1;\n    data[buffer.length++] = y1;\n    data[buffer.length++] = x2;\n    data[buffer.length++] = y2;\n  }\n\n  function stroke(buffer: FloatBuffer, color: string, lineWidth: number): void {\n    const { data, length } = buffer;\n    ctx.beginPath();\n    for (let k = 0; k < length; k += 4) {\n      ctx.moveTo(data[k], data[k + 1]);\n      ctx.lineTo(data[k + 2], data[k + 3]);\n    }\n    ctx.strokeStyle = color;\n    ctx.lineWidth = lineWidth;\n    ctx.stroke();\n  }\n\n  /** Blend the keyframes and add the pointer bump into `field`. */\n  function sampleField(blend: number, pointerX: number, pointerY: number, bump: number): void {\n    const { cols, rows, keyA, keyB } = terrain.field;\n    const size = cols * rows;\n    if (field.length !== size) field = new Float32Array(size);\n    for (let idx = 0; idx < size; idx++) {\n      const a = keyA[idx];\n      field[idx] = a + (keyB[idx] - a) * blend;\n    }\n\n    if (bump === 0) return;\n    const { cellSize, pointerRadius } = options;\n    const radius2 = pointerRadius * pointerRadius;\n    // Beyond 3 radii the bump adds < 0.0001, so only touch the cells around the pointer.\n    const reach = 3 * pointerRadius;\n    const i0 = Math.max(0, Math.floor((pointerX - reach) / cellSize));\n    const i1 = Math.min(cols - 1, Math.ceil((pointerX + reach) / cellSize));\n    const j0 = Math.max(0, Math.floor((pointerY - reach) / cellSize));\n    const j1 = Math.min(rows - 1, Math.ceil((pointerY + reach) / cellSize));\n    for (let j = j0; j <= j1; j++) {\n      const dy = j * cellSize - pointerY;\n      for (let i = i0; i <= i1; i++) {\n        const dx = i * cellSize - pointerX;\n        field[j * cols + i] += bump * Math.exp(-(dx * dx + dy * dy) / radius2);\n      }\n    }\n  }\n\n  return {\n    update(next) {\n      options = resolveTopoOptions(next);\n      terrain.configure(options);\n    },\n    render(frame) {\n      const blend = terrain.advance(frame);\n      const { pointer } = frame;\n      sampleField(blend, pointer.x, pointer.y, options.pointerStrength * pointer.influence);\n\n      minor.length = major.length = 0;\n      const { cols, rows } = terrain.field;\n      traceContours(field, cols, rows, options.cellSize, options.levelStep, collectSegment);\n\n      ctx.globalAlpha = options.lineOpacity;\n      stroke(minor, options.lineColor, options.lineWidth);\n      if (options.majorEvery > 0) stroke(major, options.majorLineColor, options.majorLineWidth);\n    },\n  };\n}\n"],"mappings":";;;;;;AAOA,SAAgB,mBAAmB,KAA+B,SAAkD;CAClH,IAAI,UAAU,mBAAmB,OAAO;CACxC,MAAM,UAAU,cAAc,OAAO;CACrC,IAAI,wBAAQ,IAAI,aAAa,CAAC;CAM9B,MAAM,QAAQ,kBAAkB,IAAI;CACpC,MAAM,QAAQ,kBAAkB,IAAI;CAEpC,SAAS,eAAe,IAAY,IAAY,IAAY,IAAY,OAAqB;EAC3F,MAAM,SAAS,QAAQ,aAAa,KAAK,QAAQ,QAAQ,eAAe,IAAI,QAAQ;EACpF,MAAM,OAAO,QAAQ,QAAQ,CAAC;EAC9B,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;EACxB,KAAK,OAAO,YAAY;CAC1B;CAEA,SAAS,OAAO,QAAqB,OAAe,WAAyB;EAC3E,MAAM,EAAE,MAAM,WAAW;EACzB,IAAI,UAAU;EACd,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,KAAK,GAAG;GAClC,IAAI,OAAO,KAAK,IAAI,KAAK,IAAI,EAAE;GAC/B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE;EACrC;EACA,IAAI,cAAc;EAClB,IAAI,YAAY;EAChB,IAAI,OAAO;CACb;;CAGA,SAAS,YAAY,OAAe,UAAkB,UAAkB,MAAoB;EAC1F,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS,QAAQ;EAC3C,MAAM,OAAO,OAAO;EACpB,IAAI,MAAM,WAAW,MAAM,QAAQ,IAAI,aAAa,IAAI;EACxD,KAAK,IAAI,MAAM,GAAG,MAAM,MAAM,OAAO;GACnC,MAAM,IAAI,KAAK;GACf,MAAM,OAAO,KAAK,KAAK,OAAO,KAAK;EACrC;EAEA,IAAI,SAAS,GAAG;EAChB,MAAM,EAAE,UAAU,kBAAkB;EACpC,MAAM,UAAU,gBAAgB;EAEhC,MAAM,QAAQ,IAAI;EAClB,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,SAAS,QAAQ,CAAC;EAChE,MAAM,KAAK,KAAK,IAAI,OAAO,GAAG,KAAK,MAAM,WAAW,SAAS,QAAQ,CAAC;EACtE,MAAM,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,SAAS,QAAQ,CAAC;EAChE,MAAM,KAAK,KAAK,IAAI,OAAO,GAAG,KAAK,MAAM,WAAW,SAAS,QAAQ,CAAC;EACtE,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK;GAC7B,MAAM,KAAK,IAAI,WAAW;GAC1B,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK;IAC7B,MAAM,KAAK,IAAI,WAAW;IAC1B,MAAM,IAAI,OAAO,MAAM,OAAO,KAAK,IAAI,EAAE,KAAK,KAAK,KAAK,MAAM,OAAO;GACvE;EACF;CACF;CAEA,OAAO;EACL,OAAO,MAAM;GACX,UAAU,mBAAmB,IAAI;GACjC,QAAQ,UAAU,OAAO;EAC3B;EACA,OAAO,OAAO;GACZ,MAAM,QAAQ,QAAQ,QAAQ,KAAK;GACnC,MAAM,EAAE,YAAY;GACpB,YAAY,OAAO,QAAQ,GAAG,QAAQ,GAAG,QAAQ,kBAAkB,QAAQ,SAAS;GAEpF,MAAM,SAAS,MAAM,SAAS;GAC9B,MAAM,EAAE,MAAM,SAAS,QAAQ;GAC/B,cAAc,OAAO,MAAM,MAAM,QAAQ,UAAU,QAAQ,WAAW,cAAc;GAEpF,IAAI,cAAc,QAAQ;GAC1B,OAAO,OAAO,QAAQ,WAAW,QAAQ,SAAS;GAClD,IAAI,QAAQ,aAAa,GAAG,OAAO,OAAO,QAAQ,gBAAgB,QAAQ,cAAc;EAC1F;CACF;AACF"}