motion-library 0.0.0-stage → 0.1.0

package/anims/flow/murmuration.js

@@ -0,0 +1,105 @@
+// Starling murmuration: a 3D flock where each bird only watches its nearest seven neighbours (as real starlings do),
+// matching their heading, keeping close, and not touching. A soft pull keeps the flock in the sky. Every few seconds a
+// falcon dives through: birds near it flee, and the panic passes from bird to bird, which is what makes the dark waves
+// ripple across the cloud. Birds are projected with perspective, so dense, edge-on parts of the flock read darker.
+const PARAMS = { birds: 1600, falcon: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const N = Math.round(PARAMS.birds), P = new Float32Array(N * 3), V = new Float32Array(N * 3), fear = new Float32Array(N);
+  for (let i = 0; i < N; i++) {
+    const a = Math.random() * 6.28, r = Math.cbrt(Math.random()) * 1.2;
+    P[i * 3] = Math.cos(a) * r * 1.6; P[i * 3 + 1] = (Math.random() - 0.5) * 0.8; P[i * 3 + 2] = Math.sin(a) * r;
+    V[i * 3] = 0.6 + Math.random() * 0.1; V[i * 3 + 1] = 0; V[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+  }
+  // a hash grid so each bird only looks at birds in its cell and the 26 around it
+  const CELL = 0.22, grid = new Map(), key = (x, y, z) => ((x + 512) << 20) | ((y + 512) << 10) | (z + 512);
+  const falcon = { x: 9, y: 0, z: 0, vx: 0, vy: 0, vz: 0, on: false, next: 2 };
+  const near = new Int32Array(7), nd = new Float32Array(7);
+  let raf, last = performance.now();
+  function step(dt, t) {
+    grid.clear();
+    for (let i = 0; i < N; i++) {
+      const k = key(Math.floor(P[i * 3] / CELL), Math.floor(P[i * 3 + 1] / CELL), Math.floor(P[i * 3 + 2] / CELL));
+      let b = grid.get(k); if (!b) grid.set(k, b = []); b.push(i);
+    }
+    // the falcon: dives through the flock's middle, then leaves and waits
+    if (PARAMS.falcon > 0 && !falcon.on && t > falcon.next) {
+      const a = Math.random() * 6.28; Object.assign(falcon, { on: true, x: Math.cos(a) * 3.5, y: 1.6, z: Math.sin(a) * 3.5 });
+      const l = Math.hypot(falcon.x, falcon.y, falcon.z); falcon.vx = -falcon.x / l * 2.6; falcon.vy = -falcon.y / l * 2.6; falcon.vz = -falcon.z / l * 2.6;
+    }
+    if (falcon.on) {
+      falcon.x += falcon.vx * dt; falcon.y += falcon.vy * dt; falcon.z += falcon.vz * dt;
+      if (Math.hypot(falcon.x, falcon.y, falcon.z) > 4.5 && falcon.x * falcon.vx + falcon.z * falcon.vz > 0) { falcon.on = false; falcon.next = t + 4 + Math.random() * 4 / Math.max(0.2, PARAMS.falcon); }
+    }
+    for (let i = 0; i < N; i++) {
+      const x = P[i * 3], y = P[i * 3 + 1], z = P[i * 3 + 2], cx = Math.floor(x / CELL), cy = Math.floor(y / CELL), cz = Math.floor(z / CELL);
+      let n = 0; nd.fill(1e9);
+      for (let a = -1; a <= 1; a++) for (let b = -1; b <= 1; b++) for (let c = -1; c <= 1; c++) {
+        const bucket = grid.get(key(cx + a, cy + b, cz + c)); if (!bucket) continue;
+        for (const j of bucket) {
+          if (j === i) continue;
+          const d = (P[j * 3] - x) ** 2 + (P[j * 3 + 1] - y) ** 2 + (P[j * 3 + 2] - z) ** 2;
+          if (d >= nd[6]) continue;
+          let s = 6; while (s > 0 && nd[s - 1] > d) { nd[s] = nd[s - 1]; near[s] = near[s - 1]; s--; }   // keep the seven nearest, sorted
+          nd[s] = d; near[s] = j; if (n < 7) n++;
+        }
+      }
+      let ax = 0, ay = 0, az = 0, mx = 0, my = 0, mz = 0, px = 0, py = 0, pz = 0, f = 0;
+      for (let k = 0; k < n; k++) {
+        const j = near[k], dx = P[j * 3] - x, dy = P[j * 3 + 1] - y, dz = P[j * 3 + 2] - z, d = Math.sqrt(nd[k]) + 1e-4;
+        mx += V[j * 3]; my += V[j * 3 + 1]; mz += V[j * 3 + 2]; px += dx; py += dy; pz += dz;
+        if (d < 0.05) { ax -= dx / d * (0.05 - d) * 40; ay -= dy / d * (0.05 - d) * 40; az -= dz / d * (0.05 - d) * 40; }
+        f = Math.max(f, fear[j] * 0.93);                                  // panic spreads to the nearest neighbours
+      }
+      if (n) { ax += (mx / n - V[i * 3]) * 1.8 + px / n * 2; ay += (my / n - V[i * 3 + 1]) * 1.8 + py / n * 2; az += (mz / n - V[i * 3 + 2]) * 1.8 + pz / n * 2; }
+      // stay in this patch of sky: a soft roost point that wanders, and a firm wall past a radius, so the flock wheels
+      // round instead of flying off
+      const ox = x - Math.sin(t * 0.13) * 0.5, oy = y - Math.sin(t * 0.21) * 0.25, oz = z, r = Math.hypot(ox, oy * 1.6, oz);
+      ax -= ox * 0.35; ay -= oy * 0.9; az -= oz * 0.45;
+      if (r > 1.1) { const k = (r - 1.1) * 4 / r; ax -= ox * k; ay -= oy * k; az -= oz * k; }
+      if (falcon.on) {
+        const dx = x - falcon.x, dy = y - falcon.y, dz = z - falcon.z, d = Math.hypot(dx, dy, dz);
+        if (d < 0.7) { const k = (0.7 - d) * 12 / (d + 0.05); ax += dx * k; ay += dy * k; az += dz * k; f = 1; }
+      }
+      fear[i] += (f - fear[i]) * Math.min(1, dt * 8);
+      if (fear[i] > 0.05) { const l = Math.hypot(mx, my, mz) || 1; ax += (V[i * 3 + 2] / l) * fear[i] * 3; az -= (V[i * 3] / l) * fear[i] * 3; }   // frightened birds bank sideways
+      let vx = V[i * 3] + ax * dt, vy = V[i * 3 + 1] + ay * dt, vz = V[i * 3 + 2] + az * dt;
+      const sp = Math.hypot(vx, vy, vz), target = 0.75 + fear[i] * 0.6, k = (sp + (target - sp) * Math.min(1, dt * 2)) / (sp || 1);
+      V[i * 3] = vx * k; V[i * 3 + 1] = vy * k; V[i * 3 + 2] = vz * k;
+    }
+    for (let i = 0; i < N * 3; i++) P[i] += V[i] * dt;
+  }
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    const t = now / 1000;
+    step(dt, t);
+    const sky = ctx.createLinearGradient(0, 0, 0, H);
+    sky.addColorStop(0, '#5b6f9a'); sky.addColorStop(0.55, '#d79a8a'); sky.addColorStop(0.85, '#f2c08a'); sky.addColorStop(1, '#f6d7a2');
+    ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = '#2b2530'; ctx.beginPath(); ctx.moveTo(0, H);
+    for (let x = 0; x <= W; x += 6) ctx.lineTo(x, H * 0.93 - Math.abs(Math.sin(x * 0.05) * Math.sin(x * 0.013)) * H * 0.05);
+    ctx.lineTo(W, H); ctx.fill();
+    // camera slowly circles the flock
+    const ang = t * 0.05, ca = Math.cos(ang), sa = Math.sin(ang), F = Math.min(W, H) * 1.05, cx = W / 2, cy = H * 0.44, dist = 3.6;
+    ctx.fillStyle = 'rgba(25,20,30,.85)';
+    const draw = (x, y, z, s) => {
+      const rx = x * ca - z * sa, rz = x * sa + z * ca + dist;
+      if (rz < 0.3) return;
+      const k = F / rz, sz = Math.max(0.6, s * k * 0.012);
+      ctx.fillRect(cx + rx * k - sz, cy - y * k - sz * 0.5, sz * 2, sz);   // a bird far away is just a dash
+    };
+    for (let i = 0; i < N; i++) draw(P[i * 3], P[i * 3 + 1], P[i * 3 + 2], 1);
+    if (falcon.on) { ctx.fillStyle = 'rgba(20,15,20,1)'; draw(falcon.x, falcon.y, falcon.z, 2.6); }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/orbitals.js

@@ -0,0 +1,195 @@
+// Hydrogen orbitals: a quarter of a million particles, each a guess at where the electron is. Every frame each one
+// proposes a small random step and keeps it with probability |ψ(new)|² / |ψ(old)|² (the Metropolis rule), so the
+// cloud's density always follows the exact wavefunction: the real solution of the Schrödinger equation, built from
+// Laguerre polynomials and spherical harmonics. Colour is the phase of ψ, which turns with time. Between orbitals the
+// atom is in a superposition of both, and the cloud flows from one shape into the next.
+const PARAMS = { grid: 512, speed: 1, glow: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  const label = document.createElement('div');
+  label.style.cssText = 'position:absolute;left:14px;bottom:12px;font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(214,226,255,.62);letter-spacing:.04em;pointer-events:none;white-space:pre';
+  stage.append(canvas, label);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const G = Math.max(64, Math.round(PARAMS.grid)), COUNT = G * G;
+
+  // n, l, m: the order they appear in; the cloud flows from each into the next
+  const STATES = [[2, 1, 1], [3, 2, 0], [3, 2, 2], [4, 3, 1], [3, 2, 1], [4, 3, 3], [4, 3, 0], [1, 0, 0], [2, 1, 0]];
+  const HOLD = 5.5, MORPH = 4.5, SUB = 'spdf', name = s => `${s[0]}${SUB[s[1]]}`;
+  const reach = s => 2.3 * s[0] * s[0] + 1.2;                    // how far out the cloud extends, in Bohr radii
+
+  const ORB = `
+  float fact(int n) { float f = 1.; for (int i = 2; i <= n; i++) f *= float(i); return f; }
+  float lag(int k, float a, float x) {                            // generalised Laguerre polynomial L_k^a(x)
+    float L0 = 1., L1 = 1. + a - x; if (k == 0) return L0;
+    for (int i = 1; i < k; i++) { float L2 = ((2. * float(i) + 1. + a - x) * L1 - (float(i) + a) * L0) / float(i + 1); L0 = L1; L1 = L2; }
+    return L1;
+  }
+  float leg(int l, int m, float x) {                              // associated Legendre polynomial P_l^m(x)
+    float s = sqrt(max(0., 1. - x * x)), pmm = 1., f = 1.;
+    for (int i = 0; i < m; i++) { pmm *= -f * s; f += 2.; }
+    if (l == m) return pmm;
+    float pm1 = x * float(2 * m + 1) * pmm; if (l == m + 1) return pm1;
+    float pll = 0.;
+    for (int ll = m + 2; ll <= l; ll++) { pll = (x * float(2 * ll - 1) * pm1 - float(ll + m - 1) * pmm) / float(ll - m); pmm = pm1; pm1 = pll; }
+    return pll;
+  }
+  vec2 psi(vec3 p, ivec3 q) {                                     // the hydrogen eigenstate ψ_nlm, complex
+    int n = q.x, l = q.y, m = q.z, am = abs(m);
+    float r = length(p) + 1e-6, rho = 2. * r / float(n), rl = 1.;
+    for (int i = 0; i < l; i++) rl *= rho;
+    float R = sqrt(pow(2. / float(n), 3.) * fact(n - l - 1) / (2. * float(n) * fact(n + l))) * exp(-.5 * rho) * rl * lag(n - l - 1, float(2 * l + 1), rho);
+    float Y = sqrt(float(2 * l + 1) / 12.566371 * fact(l - am) / fact(l + am)) * leg(l, am, p.z / r);
+    float ph = float(m) * atan(p.y, p.x);
+    return R * Y * vec2(cos(ph), sin(ph));
+  }
+  uniform ivec3 QA, QB; uniform float MIX, T;
+  vec2 cmul(vec2 a, vec2 b) { return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x); }
+  vec2 wave(vec3 p) {                                             // the superposition, each part turning at its own energy
+    float ea = -.5 / float(QA.x * QA.x), eb = -.5 / float(QB.x * QB.x), k = 3.14159;
+    return cmul(psi(p, QA) * cos(MIX * 1.5708), vec2(cos(ea * T * k), -sin(ea * T * k)))
+         + cmul(psi(p, QB) * sin(MIX * 1.5708), vec2(cos(eb * T * k), -sin(eb * T * k)));
+  }`;
+  const QUAD = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  const simFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform float F, SC;
+  ${ORB}
+  vec3 h3(vec3 p) { p = fract(p * vec3(.1031, .103, .0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); }
+  void main() {
+    vec3 p = texture(S, uv).xyz, r = h3(vec3(gl_FragCoord.xy, F)), r2 = h3(r * 91.7 + F * .13), q;
+    if (r2.x < .05) {                                             // now and then a long jump anywhere, so lobes behind nodes still fill
+      vec3 d = normalize(h3(r2 * 37.1 + 5.) - .5 + 1e-4); q = d * pow(r2.y, .333) * SC * 1.3;
+    } else q = p + (r - .5) * SC * .1;
+    vec2 a = wave(p), b = wave(q);
+    float accept = dot(b, b) / max(dot(a, a), 1e-37);
+    o = vec4(r2.z < accept ? q : p, 1);
+  }`;
+  const drawVS = `#version 300 es
+  precision highp float; uniform sampler2D S; uniform int G; uniform mat4 M; uniform float PS, D, SC; out vec3 c;
+  ${ORB}
+  void main() {
+    vec3 p = texelFetch(S, ivec2(gl_VertexID % G, gl_VertexID / G), 0).xyz;
+    vec2 w = wave(p); float h = atan(w.y, w.x) / 6.2831853;
+    c = .5 + .5 * cos(6.2831853 * (h + vec3(0., .33, .67)));     // phase → hue
+    c = mix(vec3(.6, .7, 1.), c, .85);
+    gl_Position = M * vec4(p, 1); gl_PointSize = PS;
+    c *= 1.25 - .5 * smoothstep(-1., 1., (gl_Position.w - D) / SC);  // the far side of the cloud is dimmer: depth
+  }`;
+  const drawFS = `#version 300 es
+  precision mediump float; in vec3 c; out vec4 o; uniform float K;
+  void main() { vec2 q = gl_PointCoord * 2. - 1.; o = vec4(c * K * max(0., 1. - dot(q, q)), 1); }`;
+  const downFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform vec2 H;
+  void main() { o = (texture(S, uv) * 4. + texture(S, uv - H) + texture(S, uv + H) + texture(S, uv + vec2(H.x, -H.y)) + texture(S, uv - vec2(H.x, -H.y))) / 8.; }`;
+  const upFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform vec2 H;
+  void main() { o = (texture(S, uv + vec2(-2. * H.x, 0)) + texture(S, uv + vec2(2. * H.x, 0)) + texture(S, uv + vec2(0, 2. * H.y)) + texture(S, uv + vec2(0, -2. * H.y))
+    + 2. * (texture(S, uv + H) + texture(S, uv - H) + texture(S, uv + vec2(H.x, -H.y)) + texture(S, uv - vec2(H.x, -H.y)))) / 12.; }`;
+  const finalFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S, B; uniform float K, T; uniform vec2 R;
+  float h2(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  void main() {
+    vec2 d = (uv - .5) * vec2(R.x / R.y, 1.);
+    vec3 c = texture(S, uv).rgb; c = pow(c, vec3(1.65)) * 3.;     // steeper: lobes stand out, the thin fringe falls away
+    c += texture(B, uv).rgb * K + vec3(.004, .006, .016) * (1. - length(d));
+    c = (c * (2.51 * c + .03)) / (c * (2.43 * c + .59) + .14);
+    o = vec4(pow(clamp(c, 0., 1.), vec3(1. / 2.2)) + (h2(uv * R + fract(T) * 91.) - .5) / 160., 1);
+  }`;
+
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = (vs, fs) => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const simP = prog(QUAD, simFS), drawP = prog(drawVS, drawFS), downP = prog(QUAD, downFS), upP = prog(QUAD, upFS), finalP = prog(QUAD, finalFS);
+
+  const tex = (w, h, f, t, data = null, filt = gl.LINEAR) => {
+    const x = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, x); gl.texImage2D(gl.TEXTURE_2D, 0, f, w, h, 0, gl.RGBA, t, data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filt); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filt);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, x, 0);
+    return { tex: x, fb, w, h };
+  };
+  // particles start as a loose ball and condense into the first orbital
+  const init = new Float32Array(COUNT * 4), r0 = reach(STATES[0]);
+  for (let i = 0; i < COUNT; i++) { const u = Math.random() * 2 - 1, a = Math.random() * 6.283, s = Math.sqrt(1 - u * u), r = Math.cbrt(Math.random()) * r0; init.set([Math.cos(a) * s * r, Math.sin(a) * s * r, u * r, 1], i * 4); }
+  let A = tex(G, G, gl.RGBA32F, gl.FLOAT, init, gl.NEAREST), B = tex(G, G, gl.RGBA32F, gl.FLOAT, init, gl.NEAREST);
+
+  const quad = gl.createVertexArray(); gl.bindVertexArray(quad);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const empty = gl.createVertexArray();
+
+  let W = 1, H = 1, scene = null, mips = [];
+  const resize = () => {
+    const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, 2);
+    W = canvas.width = Math.max(1, (w * d) | 0); H = canvas.height = Math.max(1, (h * d) | 0);
+    for (const r of [scene, ...mips]) if (r) { gl.deleteTexture(r.tex); gl.deleteFramebuffer(r.fb); }
+    scene = tex(W, H, gl.RGBA16F, gl.HALF_FLOAT); mips = [];
+    let mw = W, mh = H; for (let i = 0; i < 5; i++) { mw = Math.max(1, mw >> 1); mh = Math.max(1, mh >> 1); mips.push(tex(mw, mh, gl.RGBA16F, gl.HALF_FLOAT)); }
+  };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const pass = (P, target, src) => {
+    gl.useProgram(P.p); gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fb : null); gl.viewport(0, 0, target ? target.w : W, target ? target.h : H);
+    if (src) { gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, src); gl.uniform1i(P.u.S, 0); }
+    gl.bindVertexArray(quad);
+  };
+  const setWave = (P, qa, qb, mix, t) => { gl.uniform3i(P.u.QA, ...qa); gl.uniform3i(P.u.QB, ...qb); gl.uniform1f(P.u.MIX, mix); gl.uniform1f(P.u.T, t); };
+  // a camera circling the atom's z axis, looking slightly down on it
+  const view = (az, el, dist, aspect) => {
+    const ex = Math.cos(el) * Math.cos(az) * dist, ey = Math.cos(el) * Math.sin(az) * dist, ez = Math.sin(el) * dist;
+    let fx = -ex, fy = -ey, fz = -ez; const fl = Math.hypot(fx, fy, fz); fx /= fl; fy /= fl; fz /= fl;
+    let rx = fy * 1 - fz * 0, ry = fz * 0 - fx * 1, rz = 0; const rl = Math.hypot(rx, ry) || 1; rx /= rl; ry /= rl;
+    const ux = ry * fz - rz * fy, uy = rz * fx - rx * fz, uz = rx * fy - ry * fx;
+    const f = 1 / Math.tan(0.36), near = dist * 0.05, far = dist * 4, nf = 1 / (near - far);
+    const V = [rx, ux, -fx, 0, ry, uy, -fy, 0, rz, uz, -fz, 0, -(rx * ex + ry * ey + rz * ez), -(ux * ex + uy * ey + uz * ez), fx * ex + fy * ey + fz * ez, 1];
+    const P = [f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (far + near) * nf, -1, 0, 0, 2 * far * near * nf, 0];
+    const M = new Float32Array(16);
+    for (let c = 0; c < 4; c++) for (let r = 0; r < 4; r++) { let s = 0; for (let k = 0; k < 4; k++) s += P[k * 4 + r] * V[c * 4 + k]; M[c * 4 + r] = s; }
+    return M;
+  };
+
+  let raf, last = performance.now(), t = 0, frameNo = 0, shown = '';
+  const ease = x => x * x * (3 - 2 * x);
+  function frame(now) {
+    t += Math.min(0.05, (now - last) / 1000) * PARAMS.speed; last = now; frameNo++;
+    // where we are in the sequence: holding one state, or flowing to the next
+    const period = HOLD + MORPH, k = Math.floor(t / period), local = t - k * period;
+    const qa = STATES[k % STATES.length], qb = STATES[(k + 1) % STATES.length];
+    const mix = local < HOLD ? 0 : ease((local - HOLD) / MORPH);
+    const sc = reach(qa) + (reach(qb) - reach(qa)) * mix;
+    const txt = mix === 0 ? `${name(qa)}   n=${qa[0]}  l=${qa[1]}  m=${qa[2]}` : `${name(qa)} + ${name(qb)}   superposition`;
+    if (txt !== shown) { label.textContent = txt; shown = txt; }
+
+    gl.disable(gl.BLEND);
+    for (let s = 0; s < 2; s++) {                                 // two Metropolis steps per frame
+      pass(simP, B, A.tex); gl.uniform1f(simP.u.F, frameNo * 2 + s); gl.uniform1f(simP.u.SC, sc); setWave(simP, qa, qb, mix, t);
+      gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, scene.fb); gl.viewport(0, 0, W, H); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE);
+    gl.useProgram(drawP.p); gl.bindVertexArray(empty); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.tex);
+    gl.uniform1i(drawP.u.S, 0); gl.uniform1i(drawP.u.G, G); setWave(drawP, qa, qb, mix, t);
+    gl.uniformMatrix4fv(drawP.u.M, false, view(t * 0.16, 0.78 + 0.32 * Math.sin(t * 0.13), sc * 3.1, W / H));
+    gl.uniform1f(drawP.u.PS, Math.max(1, H / 480)); gl.uniform1f(drawP.u.D, sc * 3.1); gl.uniform1f(drawP.u.SC, sc); gl.uniform1f(drawP.u.K, 0.05 * (262144 / COUNT) * Math.min(1, (H / 480) ** 2));   // the same glow at any size or count
+    gl.drawArrays(gl.POINTS, 0, COUNT);
+    let src = scene;
+    gl.disable(gl.BLEND);
+    for (const m of mips) { pass(downP, m, src.tex); gl.uniform2f(downP.u.H, 0.5 / src.w, 0.5 / src.h); gl.drawArrays(gl.TRIANGLES, 0, 3); src = m; }
+    gl.enable(gl.BLEND);
+    for (let i = mips.length - 1; i > 0; i--) { pass(upP, mips[i - 1], mips[i].tex); gl.uniform2f(upP.u.H, 0.5 / mips[i].w, 0.5 / mips[i].h); gl.drawArrays(gl.TRIANGLES, 0, 3); }
+    gl.disable(gl.BLEND);
+    pass(finalP, null, scene.tex); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, mips[0].tex); gl.uniform1i(finalP.u.B, 1);
+    gl.uniform1f(finalP.u.K, 0.35 * PARAMS.glow); gl.uniform1f(finalP.u.T, t); gl.uniform2f(finalP.u.R, W, H); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.activeTexture(gl.TEXTURE0);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); label.remove(); };
+}

package/anims/flow/particle-life.js

@@ -0,0 +1,87 @@
+// Particle life: six species of particles and one table that says how much each species likes or dislikes each
+// other one. Every pair pushes apart when very close, then attracts or repels by its table entry, fading out at
+// a fixed range. The rule is not symmetric (red may chase green while green flees red), and out of that come things
+// that look alive: cells with membranes, worms, spinners, swarms that hunt each other. Every half minute the table
+// slowly drifts to a new random one, and the creatures melt and different ones form. Drag to stir.
+const PARAMS = { particles: 2400, species: 6, range: 0.105 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;background:#05060a;touch-action:none';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 1, H = 1, A = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1; A = W / H; canvas.width = Math.max(1, (W * d) | 0); canvas.height = Math.max(1, (H * d) | 0); ctx.setTransform(d, 0, 0, d, 0, 0); ctx.fillStyle = '#05060a'; ctx.fillRect(0, 0, W, H); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const N = Math.max(300, Math.round(PARAMS.particles)), K = Math.max(2, Math.min(8, Math.round(PARAMS.species)));
+  const HUES = ['#ff4d6d', '#ffd166', '#06d6a0', '#4cc9f0', '#b388ff', '#ff9e5e', '#f2f2f2', '#7bdff2'];
+  const sprites = HUES.map(c => { const s = document.createElement('canvas'); s.width = s.height = 24; const g = s.getContext('2d'), r = g.createRadialGradient(12, 12, 0, 12, 12, 12); r.addColorStop(0, '#fff'); r.addColorStop(0.22, c); r.addColorStop(0.6, c + '44'); r.addColorStop(1, c + '00'); g.fillStyle = r; g.fillRect(0, 0, 24, 24); return s; });
+  // positions live in a wrapping box A wide and 1 tall
+  const x = new Float32Array(N), y = new Float32Array(N), vx = new Float32Array(N), vy = new Float32Array(N), sp = new Uint8Array(N);
+  for (let i = 0; i < N; i++) { x[i] = Math.random() * A; y[i] = Math.random(); sp[i] = i % K; }
+  const rand = () => { const m = new Float32Array(K * K); for (let i = 0; i < K * K; i++) m[i] = Math.random() * 2 - 1; return m; };
+  let from = rand(), to = rand(), M = new Float32Array(K * K), epoch = 0;
+  const ptr = { x: 0, y: 0, on: false };
+  const at = e => { const r = canvas.getBoundingClientRect(); ptr.x = ((e.clientX - r.left) / r.width) * A; ptr.y = (e.clientY - r.top) / r.height; };
+  const down = e => { ptr.on = true; at(e); canvas.setPointerCapture(e.pointerId); };
+  const move = e => { if (ptr.on) at(e); };
+  const up = () => { ptr.on = false; };
+  canvas.addEventListener('pointerdown', down); canvas.addEventListener('pointermove', move); canvas.addEventListener('pointerup', up); canvas.addEventListener('pointercancel', up);
+
+  const BETA = 0.3, cell = new Int32Array(N), heads = new Map();
+  function step(dt) {
+    const R = PARAMS.range, gx = Math.max(1, Math.floor(A / R)), gy = Math.max(1, Math.floor(1 / R));
+    heads.clear();
+    for (let i = 0; i < N; i++) { const k = (Math.floor((x[i] / A) * gx) % gx) * gy + (Math.floor(y[i] * gy) % gy); cell[i] = heads.get(k) ?? -1; heads.set(k, i); }   // linked lists per cell
+    const fr = Math.pow(0.5, dt / 0.04), F = 9 * R;
+    for (let i = 0; i < N; i++) {
+      let ax = 0, ay = 0;
+      const cx = Math.floor((x[i] / A) * gx), cy = Math.floor(y[i] * gy), row = sp[i] * K;
+      for (let ox = -1; ox <= 1; ox++) for (let oy = -1; oy <= 1; oy++) {
+        let j = heads.get((((cx + ox) % gx + gx) % gx) * gy + (((cy + oy) % gy + gy) % gy)) ?? -1;
+        while (j >= 0) {
+          if (j !== i) {
+            let dx = x[j] - x[i], dy = y[j] - y[i];
+            if (dx > A / 2) dx -= A; else if (dx < -A / 2) dx += A; if (dy > 0.5) dy -= 1; else if (dy < -0.5) dy += 1;   // the box wraps
+            const d = Math.sqrt(dx * dx + dy * dy) / R;
+            if (d > 0 && d < 1) {
+              const f = d < BETA ? d / BETA - 1 : M[row + sp[j]] * (1 - Math.abs(2 * d - 1 - BETA) / (1 - BETA));
+              ax += (dx / (d * R)) * f; ay += (dy / (d * R)) * f;
+            }
+          }
+          j = cell[j];
+        }
+      }
+      if (ptr.on) { const dx = x[i] - ptr.x, dy = y[i] - ptr.y, d2 = dx * dx + dy * dy; if (d2 < 0.02) { ax += (dx / Math.sqrt(d2 + 1e-4)) * 8; ay += (dy / Math.sqrt(d2 + 1e-4)) * 8; } }
+      vx[i] = vx[i] * fr + ax * F * dt; vy[i] = vy[i] * fr + ay * F * dt;
+    }
+    for (let i = 0; i < N; i++) { x[i] = (x[i] + vx[i] * dt + A) % A; y[i] = (y[i] + vy[i] * dt + 1) % 1; }
+  }
+
+  let raf, last = performance.now(), time = 0;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; time += dt;
+    // the table drifts to a new random one every 30 s (over 6 s)
+    if (time - epoch * 30 > 30) { epoch++; from = M.slice(); to = rand(); }
+    const k = Math.min(1, (time - epoch * 30) / 6), e = k * k * (3 - 2 * k);
+    for (let i = 0; i < K * K; i++) M[i] = from[i] + (to[i] - from[i]) * e;
+    step(dt);
+    // short trails: fade the last frame instead of clearing it
+    ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgba(5,6,10,.22)'; ctx.fillRect(0, 0, W, H);
+    ctx.globalCompositeOperation = 'lighter';
+    const s = Math.max(6, H / 66);
+    for (let i = 0; i < N; i++) ctx.drawImage(sprites[sp[i]], (x[i] / A) * W - s / 2, y[i] * H - s / 2, s, s);
+    ctx.globalCompositeOperation = 'source-over';
+    raf = requestAnimationFrame(frame);
+  }
+  // let the first creatures form before anyone looks
+  for (let i = 0; i < K * K; i++) M[i] = from[i];
+  for (let i = 0; i < 90; i++) step(1 / 60);
+  raf = requestAnimationFrame(frame);
+  return () => {
+    cancelAnimationFrame(raf); ro.disconnect();
+    canvas.removeEventListener('pointerdown', down); canvas.removeEventListener('pointermove', move); canvas.removeEventListener('pointerup', up); canvas.removeEventListener('pointercancel', up);
+    canvas.remove();
+  };
+}

package/anims/flow/physarum.js

@@ -0,0 +1,171 @@
+// Slime mould maps Tokyo: a quarter of a million agents on the GPU, each one sensing a chemical trail ahead-left,
+// ahead and ahead-right, turning toward the strongest, stepping forward and laying down more trail. That one rule is
+// how the real Physarum polycephalum forages. In 2010 researchers put oat flakes where the cities around Tokyo are
+// and the mould grew a network much like the rail system. Here the flakes leak food into the trail map, light (the
+// bay) is avoided, and the network tightens from a fine mesh into trunk lines between the cities. The trail is
+// rendered as a wet height field, so the veins catch the light.
+const PARAMS = { agents: 384, sensor: 0.39, decay: 0.9 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const G = Math.max(64, Math.round(PARAMS.agents)), COUNT = G * G, M = 768;   // agents = G², trail map M×M over the dish
+
+  // oat flakes: Tokyo in the middle and the towns around it, in dish coordinates (-1..1, y up)
+  const CITIES = [[0.02, 0.04], [-0.12, -0.12], [-0.2, -0.26], [0.2, 0.06], [0.3, 0.14], [0.02, 0.3], [-0.16, 0.36], [-0.38, 0.18], [-0.46, 0.0],
+    [-0.36, -0.2], [-0.6, -0.36], [0.24, 0.42], [0.46, 0.4], [0.56, 0.12], [0.62, -0.1], [0.1, 0.56], [-0.3, 0.56], [-0.58, 0.32], [-0.66, 0.06],
+    [0.36, 0.62], [0.72, 0.3], [-0.06, 0.16], [-0.24, 0.12], [0.16, 0.24], [-0.5, -0.5], [0.42, -0.34], [0.26, -0.5], [-0.02, -0.66]];
+  // the bay and the open sea: lit in the real experiment, which the mould avoids
+  const SEA = `
+  float sea(vec2 p) {                                            // > 0 in the water
+    float bay = .2 - length((p - vec2(.06, -.36)) * vec2(1.25, .85)) + .03 * sin(p.x * 13.) * sin(p.y * 9.);
+    float mouth = min(.07 - abs(p.x - .08 + .12 * (p.y + .5)), -.46 - p.y);   // the bay opens south to the ocean
+    float ocean = -.66 - p.y + .25 * p.x + .04 * sin(p.x * 11.);
+    return max(max(bay, ocean), mouth);
+  }`;
+  const QUAD = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  // the agents: sense, turn, step
+  const agentFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D A, TR; uniform float F, SA, SD;
+  ${SEA}
+  float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float sense(vec2 p, float a) { return texture(TR, p + vec2(cos(a), sin(a)) * SD / ${M}.).r; }
+  void main() {
+    vec4 s = texture(A, uv); vec2 p = s.xy; float a = s.z;
+    float l = sense(p, a + SA), c = sense(p, a), r = sense(p, a - SA), rnd = h(uv * 917. + F);
+    float RA = .78;                                               // turn twice the sensor angle: Jones's network regime
+    if (c > l && c > r) {} else if (c < l && c < r) a += (rnd < .5 ? 1. : -1.) * RA; else if (l > r) a += RA; else if (r > l) a -= RA;
+    vec2 q = p + vec2(cos(a), sin(a)) * 1.05 / ${M}.;
+    vec2 d = q * 2. - 1.;
+    if (length(d) > .97 || sea(d) > 0.) { a = h(uv * 31. + F) * 6.2832; q = p; }   // hit the dish wall or the light: turn away
+    o = vec4(q, a, 1);
+  }`;
+  // deposit: every agent adds a little chemical where it stands
+  const depVS = `#version 300 es
+  uniform sampler2D A; uniform int G;
+  void main() { vec2 p = texelFetch(A, ivec2(gl_VertexID % G, gl_VertexID / G), 0).xy; gl_Position = vec4(p * 2. - 1., 0, 1); gl_PointSize = 1.; }`;
+  const depFS = `#version 300 es
+  precision mediump float; out vec4 o; void main() { o = vec4(.18, 0, 0, 0); }`;
+  // the trail map: blur, fade, keep the food sources topped up, nothing survives in the light
+  const trailFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D TR; uniform float DEC; uniform vec2 C[${CITIES.length}];
+  ${SEA}
+  void main() {
+    vec2 e = vec2(1. / ${M}.); float s = 0.;
+    for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) s += texture(TR, uv + vec2(x, y) * e).r;
+    float v = s / 9. * DEC;
+    vec2 d = uv * 2. - 1.;
+    for (int i = 0; i < ${CITIES.length}; i++) { float l = length(d - C[i]); v += 1.6 * smoothstep(.024, .008, l) + .045 * smoothstep(.16, .0, l); }   // a strong source and a faint halo agents can find   // the flakes feed the network
+    if (sea(d) > 0. || length(d) > .98) v = 0.;
+    o = vec4(min(v, 40.), 0, 0, 1);
+  }`;
+  // the picture: agar in a glass dish on a dark table; the trail as a wet yellow height field with highlights
+  const showFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D TR; uniform vec2 R; uniform vec2 C[${CITIES.length}]; uniform float T;
+  ${SEA}
+  float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float n2(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3. - 2. * f); return mix(mix(h(i), h(i + vec2(1, 0)), f.x), mix(h(i + vec2(0, 1)), h(i + 1.), f.x), f.y); }
+  float slime(vec2 t) { return smoothstep(.15, 2.6, texture(TR, t).r); }
+  void main() {
+    float s = min(R.x, R.y);
+    vec2 p = (uv * R - R * .5) / (s * .46);                       // dish coordinates
+    float rr = length(p);
+    vec3 col = vec3(.075, .07, .068) * (1. - .35 * length(uv - .5)) * (.92 + .08 * n2(uv * R / 3.));   // the table
+    col *= 1. - .55 * smoothstep(1.16, .98, rr) * smoothstep(.9, 1.02, rr);                             // the dish's shadow
+    if (rr < 1.) {
+      vec2 t = p * .5 + .5, e = vec2(1.5 / ${M}.);
+      float hgt = slime(t);
+      vec2 g = vec2(slime(t + vec2(e.x, 0)) - slime(t - vec2(e.x, 0)), slime(t + vec2(0, e.y)) - slime(t - vec2(0, e.y)));
+      vec3 N = normalize(vec3(-g * 2.6, 1.));
+      vec3 L = normalize(vec3(-.5, .6, .8)), H = normalize(L + vec3(0, 0, 1));
+      // agar: a pale amber gel, slightly darker toward the rim, the lit sea a little cooler
+      vec3 agar = mix(vec3(.82, .74, .55), vec3(.66, .58, .42), smoothstep(.4, 1., rr)) * (.95 + .05 * n2(p * 40.));
+      float w = sea(p);
+      agar = mix(agar, vec3(.74, .76, .72), smoothstep(-.01, .03, w) * .6);
+      agar *= 1. - .25 * smoothstep(.04, -.01, abs(w)) * step(-.03, w);   // a faint coastline
+      vec3 c = agar;
+      // oat flakes, under the mould
+      for (int i = 0; i < ${CITIES.length}; i++) {
+        vec2 q = p - C[i]; float a = atan(q.y, q.x), rad = .022 + .006 * sin(a * 3. + float(i)) + .004 * sin(a * 7. + float(i) * 2.);
+        float f = smoothstep(rad, rad - .006, length(q));
+        c = mix(c, vec3(.93, .87, .72) * (.85 + .3 * n2(q * 200.)), f);
+      }
+      // the mould: thin film is pale, thick veins saturate to deep yellow-orange
+      float raw = texture(TR, t).r;
+      c = mix(c, vec3(.96, .84, .4), smoothstep(.03, .6, raw) * .45);   // the thin film between the veins
+      vec3 sl = mix(vec3(.98, .86, .3), vec3(.93, .62, .1), smoothstep(.55, 1., hgt));
+      sl *= .9 + .2 * n2(p * 90. + vec2(T * .7, -T * .4));          // grainy cytoplasm streaming through the tubes
+      c = mix(c, sl * (.6 + .5 * max(dot(N, L), 0.)), smoothstep(.03, .35, hgt));
+      c += vec3(1., .97, .85) * pow(max(dot(N, H), 0.), 60.) * .55 * smoothstep(.2, .6, hgt);   // wet highlights
+      // the glass: a bright rim and a soft reflection across the lid
+      c += vec3(.9, .95, 1.) * (smoothstep(.93, .99, rr) * .25 + smoothstep(.2, .0, abs(p.x * .6 + p.y - .9)) * .05);
+      col = mix(col, c, smoothstep(1., .985, rr));
+    }
+    o = vec4(pow(col, vec3(1.05)), 1);
+  }`;
+
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = (vs, fs) => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name.replace('[0]', ''); u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const agentP = prog(QUAD, agentFS), depP = prog(depVS, depFS), trailP = prog(QUAD, trailFS), showP = prog(QUAD, showFS);
+  const quad = gl.createVertexArray(); gl.bindVertexArray(quad);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const empty = gl.createVertexArray();
+  const target = (w, h, ifmt, type, filt, data = null) => {
+    const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); gl.texImage2D(gl.TEXTURE_2D, 0, ifmt, w, h, 0, gl.RGBA, type, data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filt); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filt);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+    return { t, fb };
+  };
+  // agents start spread over the land in the dish, pointing every which way
+  const init = new Float32Array(COUNT * 4);
+  for (let i = 0; i < COUNT; i++) {
+    let x, y; do { const a = Math.random() * 6.283, r = Math.sqrt(Math.random()) * 0.95; x = Math.cos(a) * r; y = Math.sin(a) * r; } while (y < -0.62 + 0.25 * x || Math.hypot((x - 0.06) * 1.25, (y + 0.36) * 0.85) < 0.2);
+    init.set([x * 0.5 + 0.5, y * 0.5 + 0.5, Math.random() * 6.283, 1], i * 4);
+  }
+  let A = target(G, G, gl.RGBA32F, gl.FLOAT, gl.NEAREST, init), B = target(G, G, gl.RGBA32F, gl.FLOAT, gl.NEAREST, init);
+  let TA = target(M, M, gl.RGBA16F, gl.HALF_FLOAT, gl.LINEAR), TB = target(M, M, gl.RGBA16F, gl.HALF_FLOAT, gl.LINEAR);
+  const cityArr = new Float32Array(CITIES.flat());
+
+  let W = 1, H = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = canvas.width = Math.max(1, (stage.clientWidth * d) | 0); H = canvas.height = Math.max(1, (stage.clientHeight * d) | 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  let raf, frameNo = 0, t0 = performance.now();
+  function frame(now) {
+    frameNo++;
+    gl.bindVertexArray(quad);
+    for (let s = 0; s < 2; s++) {
+      // move the agents
+      gl.disable(gl.BLEND); gl.useProgram(agentP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, B.fb); gl.viewport(0, 0, G, G);
+      gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.t); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, TA.t);
+      gl.uniform1i(agentP.u.A, 0); gl.uniform1i(agentP.u.TR, 1); gl.uniform1f(agentP.u.F, (frameNo * 2 + s) % 1000); gl.uniform1f(agentP.u.SA, PARAMS.sensor); gl.uniform1f(agentP.u.SD, 9);
+      gl.bindVertexArray(quad); gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+      // they deposit into the trail
+      gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); gl.useProgram(depP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, TA.fb); gl.viewport(0, 0, M, M);
+      gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.t); gl.uniform1i(depP.u.A, 0); gl.uniform1i(depP.u.G, G);
+      gl.bindVertexArray(empty); gl.drawArrays(gl.POINTS, 0, COUNT); gl.disable(gl.BLEND);
+      // and the trail spreads and fades
+      gl.useProgram(trailP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, TB.fb); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, TA.t);
+      gl.uniform1i(trailP.u.TR, 0); gl.uniform1f(trailP.u.DEC, PARAMS.decay); gl.uniform2fv(trailP.u.C, cityArr);
+      gl.bindVertexArray(quad); gl.drawArrays(gl.TRIANGLES, 0, 3); [TA, TB] = [TB, TA];
+    }
+    gl.useProgram(showP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, TA.t); gl.uniform1i(showP.u.TR, 0); gl.uniform2f(showP.u.R, W, H);
+    gl.uniform2fv(showP.u.C, cityArr); gl.uniform1f(showP.u.T, (now - t0) / 1000);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}