interactive-bg 0.1.0 → 0.2.0

package/dist/styles/fluid/simulation.js

@@ -0,0 +1,183 @@
+import { DYE_INTENSITY, VELOCITY_FADE } from "./settings.js";
+// src/styles/fluid/simulation.ts
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function createFluidSimulation(width, height) {
+	const w = width;
+	const h = height;
+	const cells = w * h;
+	let u = new Float32Array(cells);
+	let v = new Float32Array(cells);
+	let uNext = new Float32Array(cells);
+	let vNext = new Float32Array(cells);
+	let dyeR = new Float32Array(cells);
+	let dyeG = new Float32Array(cells);
+	let dyeB = new Float32Array(cells);
+	let dyeRNext = new Float32Array(cells);
+	let dyeGNext = new Float32Array(cells);
+	let dyeBNext = new Float32Array(cells);
+	const divergence = new Float32Array(cells);
+	const curl = new Float32Array(cells);
+	let pressure = new Float32Array(cells);
+	let pressureNext = new Float32Array(cells);
+	/** Bilinear sample of a field at grid coordinates, clamped at the edges. */
+	function sample(field, x, y) {
+		const gx = clamp(x, 0, w - 1);
+		const gy = clamp(y, 0, h - 1);
+		const i0 = Math.floor(gx);
+		const j0 = Math.floor(gy);
+		const i1 = Math.min(i0 + 1, w - 1);
+		const j1 = Math.min(j0 + 1, h - 1);
+		const fx = gx - i0;
+		const fy = gy - j0;
+		const top = field[j0 * w + i0] * (1 - fx) + field[j0 * w + i1] * fx;
+		const bottom = field[j1 * w + i0] * (1 - fx) + field[j1 * w + i1] * fx;
+		return top * (1 - fy) + bottom * fy;
+	}
+	/** Zero the velocity along the walls, so the field doesn't leak. */
+	function walls() {
+		for (let i = 0; i < w; i++) {
+			u[i] = 0;
+			u[(h - 1) * w + i] = 0;
+			v[i] = 0;
+			v[(h - 1) * w + i] = 0;
+		}
+		for (let j = 0; j < h; j++) {
+			u[j * w] = 0;
+			u[j * w + w - 1] = 0;
+			v[j * w] = 0;
+			v[j * w + w - 1] = 0;
+		}
+	}
+	function addCurl(dt, amount) {
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			curl[k] = .5 * (v[k + 1] - v[k - 1] - (u[k + w] - u[k - w]));
+		}
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			const forceX = .5 * (Math.abs(curl[k + 1]) - Math.abs(curl[k - 1]));
+			const forceY = .5 * (Math.abs(curl[k - w]) - Math.abs(curl[k + w]));
+			const length = Math.hypot(forceX, forceY) + 1e-4;
+			const strength = amount * curl[k] * dt / length;
+			u[k] = clamp(u[k] + forceX * strength, -1e3, 1e3);
+			v[k] = clamp(v[k] + forceY * strength, -1e3, 1e3);
+		}
+	}
+	function project(dt, options) {
+		if (options.curl > 0) addCurl(dt, options.curl);
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			divergence[k] = .5 * (u[k + 1] - u[k - 1] + v[k + w] - v[k - w]);
+		}
+		pressure.fill(0);
+		for (let iteration = 0; iteration < 14; iteration++) {
+			for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+				const k = j * w + i;
+				pressureNext[k] = (pressure[k - 1] + pressure[k + 1] + pressure[k - w] + pressure[k + w] - divergence[k]) * .25;
+			}
+			[pressure, pressureNext] = [pressureNext, pressure];
+		}
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			u[k] -= .5 * (pressure[k + 1] - pressure[k - 1]);
+			v[k] -= .5 * (pressure[k + w] - pressure[k - w]);
+		}
+		walls();
+	}
+	function advectVelocity(dt, decay) {
+		for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) {
+			const k = j * w + i;
+			const sx = i - u[k] * dt;
+			const sy = j - v[k] * dt;
+			uNext[k] = sample(u, sx, sy) * decay;
+			vNext[k] = sample(v, sx, sy) * decay;
+		}
+		[u, uNext] = [uNext, u];
+		[v, vNext] = [vNext, v];
+		walls();
+	}
+	function advectDye(dt, decay) {
+		for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) {
+			const k = j * w + i;
+			const sx = i - u[k] * dt;
+			const sy = j - v[k] * dt;
+			dyeRNext[k] = sample(dyeR, sx, sy) * decay;
+			dyeGNext[k] = sample(dyeG, sx, sy) * decay;
+			dyeBNext[k] = sample(dyeB, sx, sy) * decay;
+		}
+		[dyeR, dyeRNext] = [dyeRNext, dyeR];
+		[dyeG, dyeGNext] = [dyeGNext, dyeG];
+		[dyeB, dyeBNext] = [dyeBNext, dyeB];
+	}
+	return {
+		width: w,
+		height: h,
+		get dyeR() {
+			return dyeR;
+		},
+		get dyeG() {
+			return dyeG;
+		},
+		get dyeB() {
+			return dyeB;
+		},
+		splat(x, y, vx, vy, color, radius, viewWidth, viewHeight) {
+			const aspect = Math.max(1, viewWidth) / Math.max(1, viewHeight);
+			const sigma = Math.max(5e-4, radius / viewHeight);
+			const cx = x / Math.max(1, viewWidth);
+			const cy = y / Math.max(1, viewHeight);
+			const reachX = sigma / aspect * w * 3;
+			const reachY = sigma * h * 3;
+			const x0 = Math.max(0, Math.floor(cx * w - reachX));
+			const x1 = Math.min(w - 1, Math.ceil(cx * w + reachX));
+			const y0 = Math.max(0, Math.floor(cy * h - reachY));
+			const y1 = Math.min(h - 1, Math.ceil(cy * h + reachY));
+			const velocityX = clamp(vx, -1e3, 1e3);
+			const velocityY = clamp(vy, -1e3, 1e3);
+			const sigma2 = sigma * sigma;
+			for (let j = y0; j <= y1; j++) {
+				const dy = (j + .5) / h - cy;
+				for (let i = x0; i <= x1; i++) {
+					const dx = ((i + .5) / w - cx) * aspect;
+					const distance = dx * dx + dy * dy;
+					if (distance > sigma2 * 9) continue;
+					const falloff = Math.exp(-distance / sigma2);
+					const k = j * w + i;
+					u[k] = clamp(u[k] + velocityX * falloff, -1e3, 1e3);
+					v[k] = clamp(v[k] + velocityY * falloff, -1e3, 1e3);
+					dyeR[k] += color[0] * DYE_INTENSITY * falloff;
+					dyeG[k] += color[1] * DYE_INTENSITY * falloff;
+					dyeB[k] += color[2] * DYE_INTENSITY * falloff;
+				}
+			}
+		},
+		step(dt, options) {
+			const stepTime = Math.min(dt, 1 / 30);
+			if (stepTime <= 0) return;
+			project(stepTime, options);
+			advectVelocity(stepTime, 1 / (1 + stepTime / VELOCITY_FADE));
+			advectDye(stepTime, 1 / (1 + stepTime / options.fade));
+		},
+		clear() {
+			for (const field of [
+				u,
+				v,
+				uNext,
+				vNext,
+				dyeR,
+				dyeG,
+				dyeB,
+				dyeRNext,
+				dyeGNext,
+				dyeBNext,
+				pressure,
+				pressureNext,
+				divergence,
+				curl
+			]) field.fill(0);
+		}
+	};
+}
+export { createFluidSimulation };
+
+//# sourceMappingURL=simulation.js.map

package/dist/styles/fluid/simulation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simulation.js","names":[],"sources":["../../../src/styles/fluid/simulation.ts"],"sourcesContent":["import type { RGB } from './color';\nimport type { ResolvedFluidOptions } from './options';\nimport { CPU_PRESSURE_ITERATIONS, DYE_INTENSITY, VELOCITY_FADE } from './settings';\n\n/**\n * The CPU fluid field: a stable-fluids solver at `resolution` cells on its longer\n * side. The Canvas 2D renderer draws it upscaled; the WebGL renderer runs the\n * same steps in shaders instead. Velocities are in grid cells per second; dye\n * channels are straight colour densities.\n */\nexport interface FluidSimulation {\n  readonly width: number;\n  readonly height: number;\n  readonly dyeR: Float32Array;\n  readonly dyeG: Float32Array;\n  readonly dyeB: Float32Array;\n  /** Add a splash of colour and velocity at `(x, y)`, in CSS pixels of a view of `viewWidth` × `viewHeight`. */\n  splat(\n    x: number,\n    y: number,\n    vx: number,\n    vy: number,\n    color: RGB,\n    radius: number,\n    viewWidth: number,\n    viewHeight: number,\n  ): void;\n  /** Advance the simulation by `dt` seconds. */\n  step(dt: number, options: ResolvedFluidOptions): void;\n  /** Clear the velocity and dye fields. */\n  clear(): void;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nexport function createFluidSimulation(width: number, height: number): FluidSimulation {\n  const w = width;\n  const h = height;\n  const cells = w * h;\n\n  let u = new Float32Array(cells);\n  let v = new Float32Array(cells);\n  let uNext = new Float32Array(cells);\n  let vNext = new Float32Array(cells);\n  let dyeR = new Float32Array(cells);\n  let dyeG = new Float32Array(cells);\n  let dyeB = new Float32Array(cells);\n  let dyeRNext = new Float32Array(cells);\n  let dyeGNext = new Float32Array(cells);\n  let dyeBNext = new Float32Array(cells);\n  const divergence = new Float32Array(cells);\n  const curl = new Float32Array(cells);\n  let pressure = new Float32Array(cells);\n  let pressureNext = new Float32Array(cells);\n\n  /** Bilinear sample of a field at grid coordinates, clamped at the edges. */\n  function sample(field: Float32Array, x: number, y: number): number {\n    const gx = clamp(x, 0, w - 1);\n    const gy = clamp(y, 0, h - 1);\n    const i0 = Math.floor(gx);\n    const j0 = Math.floor(gy);\n    const i1 = Math.min(i0 + 1, w - 1);\n    const j1 = Math.min(j0 + 1, h - 1);\n    const fx = gx - i0;\n    const fy = gy - j0;\n    const top = field[j0 * w + i0] * (1 - fx) + field[j0 * w + i1] * fx;\n    const bottom = field[j1 * w + i0] * (1 - fx) + field[j1 * w + i1] * fx;\n    return top * (1 - fy) + bottom * fy;\n  }\n\n  /** Zero the velocity along the walls, so the field doesn't leak. */\n  function walls(): void {\n    for (let i = 0; i < w; i++) {\n      u[i] = 0;\n      u[(h - 1) * w + i] = 0;\n      v[i] = 0;\n      v[(h - 1) * w + i] = 0;\n    }\n    for (let j = 0; j < h; j++) {\n      u[j * w] = 0;\n      u[j * w + w - 1] = 0;\n      v[j * w] = 0;\n      v[j * w + w - 1] = 0;\n    }\n  }\n\n  function addCurl(dt: number, amount: number): void {\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        curl[k] = 0.5 * (v[k + 1] - v[k - 1] - (u[k + w] - u[k - w]));\n      }\n    }\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        const forceX = 0.5 * (Math.abs(curl[k + 1]) - Math.abs(curl[k - 1]));\n        const forceY = 0.5 * (Math.abs(curl[k - w]) - Math.abs(curl[k + w]));\n        const length = Math.hypot(forceX, forceY) + 1e-4;\n        const strength = (amount * curl[k] * dt) / length;\n        u[k] = clamp(u[k] + forceX * strength, -1000, 1000);\n        v[k] = clamp(v[k] + forceY * strength, -1000, 1000);\n      }\n    }\n  }\n\n  function project(dt: number, options: ResolvedFluidOptions): void {\n    if (options.curl > 0) addCurl(dt, options.curl);\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        divergence[k] = 0.5 * (u[k + 1] - u[k - 1] + v[k + w] - v[k - w]);\n      }\n    }\n    pressure.fill(0);\n    for (let iteration = 0; iteration < CPU_PRESSURE_ITERATIONS; iteration++) {\n      for (let j = 1; j < h - 1; j++) {\n        for (let i = 1; i < w - 1; i++) {\n          const k = j * w + i;\n          pressureNext[k] =\n            (pressure[k - 1] + pressure[k + 1] + pressure[k - w] + pressure[k + w] - divergence[k]) * 0.25;\n        }\n      }\n      [pressure, pressureNext] = [pressureNext, pressure];\n    }\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        u[k] -= 0.5 * (pressure[k + 1] - pressure[k - 1]);\n        v[k] -= 0.5 * (pressure[k + w] - pressure[k - w]);\n      }\n    }\n    walls();\n  }\n\n  function advectVelocity(dt: number, decay: number): void {\n    for (let j = 0; j < h; j++) {\n      for (let i = 0; i < w; i++) {\n        const k = j * w + i;\n        const sx = i - u[k] * dt;\n        const sy = j - v[k] * dt;\n        uNext[k] = sample(u, sx, sy) * decay;\n        vNext[k] = sample(v, sx, sy) * decay;\n      }\n    }\n    [u, uNext] = [uNext, u];\n    [v, vNext] = [vNext, v];\n    walls();\n  }\n\n  function advectDye(dt: number, decay: number): void {\n    for (let j = 0; j < h; j++) {\n      for (let i = 0; i < w; i++) {\n        const k = j * w + i;\n        const sx = i - u[k] * dt;\n        const sy = j - v[k] * dt;\n        dyeRNext[k] = sample(dyeR, sx, sy) * decay;\n        dyeGNext[k] = sample(dyeG, sx, sy) * decay;\n        dyeBNext[k] = sample(dyeB, sx, sy) * decay;\n      }\n    }\n    [dyeR, dyeRNext] = [dyeRNext, dyeR];\n    [dyeG, dyeGNext] = [dyeGNext, dyeG];\n    [dyeB, dyeBNext] = [dyeBNext, dyeB];\n  }\n\n  return {\n    width: w,\n    height: h,\n    get dyeR() {\n      return dyeR;\n    },\n    get dyeG() {\n      return dyeG;\n    },\n    get dyeB() {\n      return dyeB;\n    },\n    splat(x, y, vx, vy, color, radius, viewWidth, viewHeight) {\n      const aspect = Math.max(1, viewWidth) / Math.max(1, viewHeight);\n      const sigma = Math.max(0.0005, radius / viewHeight);\n      const cx = x / Math.max(1, viewWidth);\n      const cy = y / Math.max(1, viewHeight);\n      const reachX = (sigma / aspect) * w * 3;\n      const reachY = sigma * h * 3;\n      const x0 = Math.max(0, Math.floor(cx * w - reachX));\n      const x1 = Math.min(w - 1, Math.ceil(cx * w + reachX));\n      const y0 = Math.max(0, Math.floor(cy * h - reachY));\n      const y1 = Math.min(h - 1, Math.ceil(cy * h + reachY));\n      // Velocities are in simulation texels per second, which is cells per second here.\n      const velocityX = clamp(vx, -1000, 1000);\n      const velocityY = clamp(vy, -1000, 1000);\n      const sigma2 = sigma * sigma;\n      for (let j = y0; j <= y1; j++) {\n        const ny = (j + 0.5) / h;\n        const dy = ny - cy;\n        for (let i = x0; i <= x1; i++) {\n          const nx = (i + 0.5) / w;\n          const dx = (nx - cx) * aspect;\n          const distance = dx * dx + dy * dy;\n          if (distance > sigma2 * 9) continue;\n          const falloff = Math.exp(-distance / sigma2);\n          const k = j * w + i;\n          u[k] = clamp(u[k] + velocityX * falloff, -1000, 1000);\n          v[k] = clamp(v[k] + velocityY * falloff, -1000, 1000);\n          dyeR[k] += color[0] * DYE_INTENSITY * falloff;\n          dyeG[k] += color[1] * DYE_INTENSITY * falloff;\n          dyeB[k] += color[2] * DYE_INTENSITY * falloff;\n        }\n      }\n    },\n    step(dt, options) {\n      const stepTime = Math.min(dt, 1 / 30);\n      if (stepTime <= 0) return;\n      project(stepTime, options);\n      advectVelocity(stepTime, 1 / (1 + stepTime / VELOCITY_FADE));\n      advectDye(stepTime, 1 / (1 + stepTime / options.fade));\n    },\n    clear() {\n      for (const field of [u, v, uNext, vNext, dyeR, dyeG, dyeB, dyeRNext, dyeGNext, dyeBNext, pressure, pressureNext, divergence, curl]) {\n        field.fill(0);\n      }\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/fluid/size.cjs

@@ -0,0 +1,17 @@
+// src/styles/fluid/size.ts
+/** Grid size for a view: the longer side gets `resolution` cells. */
+function simulationSize(resolution, width, height) {
+	const aspect = Math.max(1, width) / Math.max(1, height);
+	const long = Math.max(16, Math.round(resolution));
+	if (aspect >= 1) return {
+		width: long,
+		height: Math.max(12, Math.round(long / aspect))
+	};
+	return {
+		width: Math.max(12, Math.round(long * aspect)),
+		height: long
+	};
+}
+exports.simulationSize = simulationSize;
+
+//# sourceMappingURL=size.cjs.map

package/dist/styles/fluid/size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.cjs","names":[],"sources":["../../../src/styles/fluid/size.ts"],"sourcesContent":["/** Grid size for a view: the longer side gets `resolution` cells. */\nexport function simulationSize(\n  resolution: number,\n  width: number,\n  height: number,\n): { width: number; height: number } {\n  const aspect = Math.max(1, width) / Math.max(1, height);\n  const long = Math.max(16, Math.round(resolution));\n  if (aspect >= 1) return { width: long, height: Math.max(12, Math.round(long / aspect)) };\n  return { width: Math.max(12, Math.round(long * aspect)), height: long };\n}\n"],"mappings":";;AACA,SAAgB,eACd,YACA,OACA,QACmC;CACnC,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,GAAG,MAAM;CACtD,MAAM,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,UAAU,CAAC;CAChD,IAAI,UAAU,GAAG,OAAO;EAAE,OAAO;EAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,MAAM,CAAC;CAAE;CACvF,OAAO;EAAE,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,MAAM,CAAC;EAAG,QAAQ;CAAK;AACxE"}

package/dist/styles/fluid/size.d.cts

@@ -0,0 +1,5 @@
+/** Grid size for a view: the longer side gets `resolution` cells. */
+export declare function simulationSize(resolution: number, width: number, height: number): {
+    width: number;
+    height: number;
+};

package/dist/styles/fluid/size.d.ts

@@ -0,0 +1,5 @@
+/** Grid size for a view: the longer side gets `resolution` cells. */
+export declare function simulationSize(resolution: number, width: number, height: number): {
+    width: number;
+    height: number;
+};

package/dist/styles/fluid/size.js

@@ -0,0 +1,17 @@
+// src/styles/fluid/size.ts
+/** Grid size for a view: the longer side gets `resolution` cells. */
+function simulationSize(resolution, width, height) {
+	const aspect = Math.max(1, width) / Math.max(1, height);
+	const long = Math.max(16, Math.round(resolution));
+	if (aspect >= 1) return {
+		width: long,
+		height: Math.max(12, Math.round(long / aspect))
+	};
+	return {
+		width: Math.max(12, Math.round(long * aspect)),
+		height: long
+	};
+}
+export { simulationSize };
+
+//# sourceMappingURL=size.js.map

package/dist/styles/fluid/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","names":[],"sources":["../../../src/styles/fluid/size.ts"],"sourcesContent":["/** Grid size for a view: the longer side gets `resolution` cells. */\nexport function simulationSize(\n  resolution: number,\n  width: number,\n  height: number,\n): { width: number; height: number } {\n  const aspect = Math.max(1, width) / Math.max(1, height);\n  const long = Math.max(16, Math.round(resolution));\n  if (aspect >= 1) return { width: long, height: Math.max(12, Math.round(long / aspect)) };\n  return { width: Math.max(12, Math.round(long * aspect)), height: long };\n}\n"],"mappings":";;AACA,SAAgB,eACd,YACA,OACA,QACmC;CACnC,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,IAAI,GAAG,MAAM;CACtD,MAAM,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,UAAU,CAAC;CAChD,IAAI,UAAU,GAAG,OAAO;EAAE,OAAO;EAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,MAAM,CAAC;CAAE;CACvF,OAAO;EAAE,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,MAAM,CAAC;EAAG,QAAQ;CAAK;AACxE"}